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

Question

我遇到了一个内容可编辑的DIV怪异的问题，我有一个其div的contenteditable属性设置为true的父div，并且在按钮单击事件中，我试图将一个带有contenteditable='false'的div附加到该父div。问题是当我这样做时，父元素变得不可编辑。 （孩子没有问题-这当然是无法编辑的）。我在网上搜索并试图找出问题所在，但仍然不知道问题出在哪里。

这是我的代码：

HTML：

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

jQuery（在按钮上单击）：

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

执行上述jQuery代码时，#parent div变得不可编辑，例如（contenteditable = false）。这是为什么？这段代码有什么问题吗？还有其他方法可以防止孩子影响父母吗？

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

（（此代码目前仅在Firefox上进行过测试，因为它是我定位的主要浏览器，但没有理由使该代码在其他浏览器上的表现也不同）。

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

Answer 1

将其用于选择子div