如何在不影響父元素的情況下設置子元素的 contenteditable 屬性？

Question

我遇到了 contenteditable DIV 的這個奇怪問題，我有一個父 div，其 contenteditable 屬性設置為 true，並且在按鈕單擊事件中，我試圖 append 一個具有contenteditable='false'的 div 到這個父 div。 問題是當我這樣做時，父元素變得不可編輯。 （孩子沒有問題 - 這當然是不可編輯的）。 我搜索了 web 並試圖找出這個問題，但仍然不知道問題到底是什么。

這是我的代碼：

Html：

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

jQuery（點擊按鈕）：

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

執行上述#parent代碼時，#parent div 變得不可編輯，如 (contenteditable = false)。 這是為什么？ 這段代碼有問題嗎？ 有沒有其他方法可以防止孩子影響父母？

我讀了很多文章說這是使 contenteditable div 的孩子不可編輯的正確方法，即使沒有閱讀它們我也知道這一點。 我在處理 contenteditable 元素方面有很多經驗，這是我第一次遇到這個問題。

（此代碼目前僅在 Firefox 上進行測試，因為它是我所針對的主瀏覽器，但沒有理由此代碼在其他瀏覽器上的行為會有所不同）。

非常感謝您閱讀此問題，任何有用的想法都將受到贊賞和支持。 謝謝你。

Answer 1

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

將此用於 select 子 div