Mouse right click on Firefox triggers click event

Question

I noticed that the mouse right click on Firefox triggers an addEventListener.

I tried this code on more browsers and more OS (IE 11-10-9, Safari, Chrome) and by pressing the mouse right click, only on Firefox the console.log message is always printed.

<div id="one-div" style="height:400px;width:500px;background-color:#000;"> click me </div>
<script>
    function cb(event, from){
        // if click is fired on <div> with:
        // left click, both EventListener will be printed.
        // right click, only the 'document' one will be printed.
        event.preventDefault();
        console.log(event + ' from: ' + from );
    }
    document.addEventListener('click', function(e){
        cb(e,'document');
    }, false);
    document.getElementById("one-div").addEventListener('click', function(e){
        cb(e,'one-div');
    }, false);
</script>

And also I noticed that, when the click is fired into the div, it triggers the document.addEventListener only. I searched on Firefox changelog but no news about this.

Can anyone explain this behavior? Thanks!

Answer 1

By default, in all browsers right click event is captured by addEventListener('contextmenu'), otherwise a right click will open a window with some options (each browser has different one).

In Firefox, when you add addEventListener('click') to the document object, it will capture any mouse clicking events (left, right, wheel) on the document and it will disable this right click behavior.

In addition, this is what Mozilla documentation says in Mouse Events section, although the (ANY button) stuff is not activated until you add the listener to the document object

click: A pointing device button (ANY button; soon to be primary button only) has been pressed and released on an element.

*Note: still the above window is shown when you double click right mouse button, but not with a single click.