如何在不影响parent元素的情况下设置child的contenteditable属性？

Question

我遇到了这个关于 contenteditable DIV 的奇怪问题，我有一个 parent div 其 contenteditable 属性设置为 true，在按钮点击事件中我正在尝试将带有 contenteditable='false' 的 div 添加到此 parent div。问题是，当我这样做时，parent 元素变得不可编辑。（child 没有问题——当然是不可编辑的）。我在网上搜索并试图解决这个问题，但仍然不知道到底是什么问题。

这是我的代码：

Html:

<div id="parent" contenteditable="true"></div>

jQuery（点击按钮）：

$("#parent").append
(
    "<div style=\"position: relative; display: block;\" contenteditable=\"false\">" +
        "<img src=\"...\"/>" +
    "</div>"
);

当上面的jQuery代码被执行时，#parentdiv变得不可编辑，就像(contenteditable = false)。这是为什么？这段代码有什么问题吗？有没有其他方法可以防止 child 影响 parent？

我读了很多文章，说这是使 child 的 contenteditable div 不可编辑的正确方法，即使不阅读它们我也知道这一点。我有很多处理contenteditable元素的经验，这是我第一次遇到这个问题。

（此代码目前仅在 Firefox 上测试，因为它是我的目标浏览器，但没有理由认为此代码在其他浏览器上的行为会有所不同）。

非常感谢阅读这个问题，任何有用的想法都会受到赞赏和支持。谢谢。

Answer 1

$("#parent > div").prop("contenteditable", "false");

Use this for select child div

如何在不影响parent元素的情况下设置child的contenteditable属性？

How to set child's contenteditable property without affecting the parent element?

html

javascript

jquery

parent-child

contenteditable