Search code examples
htmleventsfocuscontenteditable

Prevent contenteditable element from getting focus when clicking parent

When clicking anywhere above the "Outside" div container in the following example, the contenteditable span element gets the focus.

<div style="margin:30px">
    <span contenteditable="true" style="background:#eee">
        Hello World
    </span>
    <div>Outside</div>
</div>

Here's a jsFiddle: http://jsfiddle.net/AXM4Y/

I want the contenteditable behave more like a real text input, thus only clicking the span element itself should trigger its focus. How do I do this? How can the event capturing of the container element be stopped. I've already tried "e.stopPropagation()" with jQuery on the parent div, but it didn't work.

Solution

  • I fixed it with the way I put pointer-events: none on parent element and pointer-events: all on element with content editable attribute.