单击父级时，防止contenteditable元素变得焦点 [英] Prevent contenteditable element from getting focus when clicking parent

问题描述

在以下示例中点击Outsidediv容器之上的任何位置时，可以设置的span元素将成为焦点。

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>

这是一个jsFiddle：
http://jsfiddle.net/AXM4Y/

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

我希望contenteditable的行为更像一个真正的文本输入，因此只有点击span元素本身才能触发其焦点。我该如何做？如何停止捕获容器元素的事件。我已经在父div上使用jQuery尝试过e.stopPropagation（），但是它没有起作用。

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.

推荐答案

我使用我将 pointer-events：none 在父元素和指针事件：all 上的方式进行修复元素与内容可编辑属性。

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

这篇关于单击父级时，防止contenteditable元素变得焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！