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

【问题标题】：How to set child's contenteditable property without affecting the parent element?如何在不影响父元素的情况下设置子元素的 contenteditable 属性？
【发布时间】：2020-09-04 12:05:45
【问题描述】：

我在 contenteditable DIV 上遇到了这个奇怪的问题，我有一个父 div，其 contenteditable 属性设置为 true，并且在按钮单击事件中，我试图将带有 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 上测试，因为它是我所针对的主要浏览器，但没有理由此代码在其他浏览器上的行为会有所不同）。

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

【问题讨论】：

标签： javascript html jquery parent-child contenteditable

【解决方案1】：

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

将此用于选择子 div

【讨论】：