Firefox contenteditable动态选择时打开/关闭_Firefox_Cross Browser_Contenteditable

Firefox contenteditable动态选择时打开/关闭

firefox

Firefox contenteditable动态选择时打开/关闭,firefox,cross-browser,contenteditable,Firefox,Cross Browser,Contenteditable,我有这样一个网站： <!DOCTYPE html> <html> <body> <script src="jquery-2.0.3.min.js"></script> <div id="block"> <span id="c1" class="chunk">first </span> <span id="c2" class="chunk">second </span> &l

我有这样一个网站：

<!DOCTYPE html>
<html>
<body>

<script src="jquery-2.0.3.min.js"></script>

<div id="block">
<span id="c1" class="chunk">first </span>
<span id="c2" class="chunk">second </span>
<span id="c3" class="chunk">third </span>
</div>

<script>

    var my = {
        mousedown: function(event) {
            $('.chunk').each(function() {
                this.setAttribute('contenteditable', 'false');
            });
        },
        mouseup: function(event) {
            $('.chunk').each(function() {
                this.setAttribute('contenteditable', 'true');
            });
        }
    };

    $('.chunk')
    .on('mousedown', my.mousedown)
    .on('mouseup', my.mouseup)
    ;

    my.mouseup(null);

</script>

</body>

</html>


第一
第二
第三
变量my={
mousedown：函数（事件）{
$（'.chunk'）。每个（函数（）{
this.setAttribute（'contenteditable'，'false'）；
});
},
mouseup：函数（事件）{
$（'.chunk'）。每个（函数（）{
this.setAttribute（'contenteditable'，'true'）；
});
}
};
$（“.chunk”）
.on（'mousedown'，my.mousedown）
.on（'mouseup'，我的.mouseup）
;
my.mouseup（空）；

期望的结果与chrome中的结果类似：

当我单击块时，我可以写入文本，并看到一个插入符号（光标）当我选择contenteditable时，它将在选择时被禁用

但在FIREFOX中：

我无法再在contenteditable中键入内容因为onmousedown在onclick时禁用contenteditable（我认为）

你能帮忙修理吗？我正在寻找解决这个问题的跨浏览器解决方案。

请

答案似乎比我想象的要简单。主包含父项必须具有contenteditable=true，在此之后，每个浏览器中的所有内容都会正常工作。现在，mousemove和mousedown模拟selectstart也可以正常工作（本项目的另一个功能），因此当遇到类似问题时，请记住：只需创建一个contenteditable主容器，您就不会遇到选择问题了

<!DOCTYPE html> <html> <body> <script src="jquery-2.0.3.min.js"></script> <div id="block" contenteditable="true"> <span id="c1" class="chunk">first </span> <span id="c2" class="chunk">second </span> <span id="c3" class="chunk">third </span> </div> </body> </html>

第一第二第三