我注意到鼠标右击Firefox会触发addEventListener.

我在更多的浏览器和更多的操作系统(IE 11-10-9,Safari,Chrome)上尝试了这个代码,并且通过鼠标右键单击,仅在Firefox上,始终打印console.log消息.

<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>

而且我注意到,当点击触发到div时,它只触发document.addEventListener.
我搜索了Firefox更新日志,但没有关于此的消息.

谁能解释这种行为？
谢谢！

解决方法:

默认情况下,在所有浏览器中都会捕获右键单击事件
addEventListener(‘contextmenu’),否则右击将打开一个带有一些选项的窗口(每个浏览器都有不同的选项).

在Firefox中,当您将addEventListener(‘click’)添加到文档对象时,它将捕获文档上的任何鼠标单击事件(左,右,方向盘),它将禁用this右键单击行为.

此外,这是Mozilla documentation在鼠标事件部分中所说的,尽管在将监听器添加到文档对象之前,(ANY按钮)的内容不会被激活

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

*注意：当您双击鼠标右键时,仍会显示上面的窗口,但只需单击一下即可显示.