当我在 firefox 浏览器下点击它时，contenteditable 会触发模糊事件

Question

我有一个 contentEditable DIV

<div id="content" contenteditable="true">

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

</div>

使用以下 javascript 代码：

$(document).ready(function(){

    var obj = {

        func1: function(){

            $("#content").on("click", function(){
                alert("click");
            });

            $("#content").on("blur", function(){
                alert("blur");
            });

        }

    }

    function execute(obj){

        obj.func1();

    }


    execute(obj);


});

这是 jsfiddle：http://jsfiddle.net/mody5/b84708c1/

代码应该在我单击 contentEditable div 时提醒 "click" 并在我单击 contentEditable div 时提醒 "blur"，但是在 FIREFOX 当我点击它时也会触发 "blur" 事件！

这是一个错误吗？我该如何解决这个问题？

Answer 1

在firefox中alert()会触发blur事件，因为它会改变焦点进入alert框。从而触发模糊事件。

在您的代码中，只需将 alert("click"); 更改为其他内容.. 例如 console.log("click"); 即可。

注意：在 chrome 中它起作用是因为 alert() 函数在 firefox 和 chrome 中以不同的方式起作用。

当我在 firefox 浏览器下点击它时，contenteditable 会触发模糊事件

contenteditable is triggering blur event when I click on it under firefox browser

javascript

firefox

contenteditable