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

Question

I have a 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>

with the following javascript code :

$(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);


});

Here is the jsfiddle : http://jsfiddle.net/mody5/b84708c1/

The code is supposed to alert "click" when I click the contentEditable div and to alert "blur" when I click out of the contentEditable div, but in FIREFOX when I click it trigger "blur" event too !

Is this a bug ? how I can solve this ?

Answer 1

In firefox alert() will trigger the blur event, because it will change the focus into the alert box. And thus trigger the blur event.

In your code, just change alert("click"); into something else.. like console.log("click"); and it will work.

Note: In chrome it works because the alert() function works in different ways for firefox and chrome.