Html contenteditable=false 里面的 contenteditable=true 块在 IE8 中仍然是可编辑的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7522848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
contenteditable=false inside contenteditable=true block is still editable in IE8
提问by Gezim
I have the following HTML intending to make sure that the inner spanisn't editable. This works in other browsers but not IE8.
我有以下 HTML 旨在确保内部span不可编辑。这适用于其他浏览器，但不适用于 IE8。
<div contenteditable="true">
Luke, I am your father.
<span contenteditable="false">I'm your son?! Ewww!</span>
Don't speak back to me!
</div>
Here's a JSFiddle to illustrate the point (use IE8 to test it): http://jsfiddle.net/haxhia/uUKPA/3/.
这是一个 JSFiddle 来说明这一点（使用 IE8 对其进行测试）：http: //jsfiddle.net/haxhia/uUKPA/3/。
How do I make sure that IE8 treats this properly as well?
我如何确保 IE8 也能正确处理这个问题？
回答by Gezim
Okay, I already have discovered the answer much like how Penicillin was discovered.
好的，我已经找到了答案，就像发现青霉素的方式一样。
You see, playing around with this code, I mistakenly set contenteditableto truefor the spanand voila! It worked!
你看，玩弄此代码，我错误地设置contenteditable到true了span，瞧！有效！
So, to make a spanNON-contenteditable inside a contenteditable div, you just set its contenteditableattribute to true!
因此，要span在 contenteditable div 中创建一个NON-contenteditable，您只需将其contenteditable属性设置为true!
<div contenteditable="true">
Luke, I am your father.
<span contenteditable="true">I'm your son?! Ewww!</span>
Don't speak back to me!
</div>
Here's the file to demonstrate (use IE8 to open it): https://codepen.io/hgezim/pen/qMppLg.
这是要演示的文件（使用 IE8 打开它）：https: //codepen.io/hgezim/pen/qMppLg。
Lastly, I didn't post the question to get votes (although, they wouldn't hurt!), but since the solution was so ridiculous and I didn't find it here, I thought someone may find this tip time saving.
最后，我没有发布问题以获得投票（虽然，他们不会伤害！），但由于解决方案是如此荒谬而且我没有在这里找到它，我想有人可能会发现这个提示可以节省时间。
回答by Alexvx
The problem with contenteditable="true" inside contenteditable="true" (to make it not editable) on IE is that double clicking on the inner element makes it editable
IE 上 contenteditable="true" 内的 contenteditable="true"（使其不可编辑）的问题是双击内部元素使其可编辑
Solution
解决方案
Grandparent tag as contenteditable true
Parent tag as contenteditable false
Child tag as contenteditable false
the contents of child tag will not be editable for sure
子标签的内容肯定是不可编辑的
<ul contenteditable="true">
<li>By default, this content is editable via its
inherited parent elements value.</li>
<li contenteditable="false" ><span contenteditable="false">This content is
<b>not</b>
editable for sure</span></li>
</ul>
回答by Chetan Chandrashekar
I was stuck with the same problem today and after trying for a while figured a solution that works for me on IE. Add a click event listener to the child contenteditable element. In the event handler do as below
我今天遇到了同样的问题，在尝试了一段时间后，我想出了一个在 IE 上对我有用的解决方案。向子 contenteditable 元素添加一个单击事件侦听器。在事件处理程序中执行以下操作
document.querySelector('.simulated-icon').addEventListener('click', function(evt){
evt.stopPropogation;
evt.preventDefault;
return false;
});
<div class="simulated-icon"><span>Icon text</span></div>As you can see here returning false on the click event listener for the child content editable tells IE to not allow the edit. This works if there is a click event on the parent node and we check if the target child node is clicked in the event listener. Good luck.
正如您在此处看到的，在子内容可编辑的单击事件侦听器上返回 false 会告诉 IE 不允许编辑。如果父节点上有单击事件，并且我们检查是否在事件侦听器中单击了目标子节点，则此方法有效。祝你好运。
