Предотвращать получение элемента, удовлетворяющего контенту, при нажатии на родительский

При нажатии в любом месте над контейнером div "Outside" в следующем примере элемент contenteditable span получает фокус.

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

Здесь jsFiddle: http://jsfiddle.net/AXM4Y/

Я хочу, чтобы contenteditable вел себя как реальный текстовый ввод, поэтому только щелчок самого элемента span должен вызвать его фокус. Как мне это сделать? Как можно остановить событие захвата элемента контейнера. Я уже пробовал "e.stopPropagation()" с jQuery в родительском div, но это не сработало.

Ответ 1

Я исправил его так, как я положил pointer-events: none на родительский элемент и pointer-events: all на элемент с атрибутом редактирования контента.