html - Prevent contenteditable element from getting focus when clicking parent -

html - Prevent contenteditable element from getting focus when clicking parent -

when clicking anywhere above "outside" div container in next example, contenteditable span element gets focus.

<div style="margin:30px"> <span contenteditable="true" style="background:#eee"> hello world </span> <div>outside</div> </div>

here's jsfiddle: http://jsfiddle.net/axm4y/

i want contenteditable behave more real text input, clicking span element should trigger focus. how do this? how can event capturing of container element stopped. i've tried "e.stoppropagation()" jquery on parent div, didn't work.

i fixed way set pointer-events: none on parent element , pointer-events: all on element content editable attribute.

html events focus contenteditable