鼠标右键单击Firefox会触发单击事件

Question

我注意到，在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 changelog，但没有相关新闻。

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

Answer 1

默认情况下，在所有浏览器中，都会通过捕获右键单击事件 addEventListener('contextmenu')，否则右键单击将打开一个包含某些选项的窗口（每个浏览器都有不同的选项）。

在Firefox中，当您添加addEventListener('click')到document对象时，它将捕获文档上的所有鼠标单击事件（左，右，滚轮），并且将禁用此右键单击行为。

此外，这是Mozilla文档在“ 鼠标事件”部分中所说的，尽管（ANY按钮）内容只有在将侦听器添加到document对象后才会激活

click：按下并释放了元素上的定点设备按钮（ANY按钮；不久将成为主要按钮）。

*注意：当您双击鼠标右键时，仍会显示上述窗口，但单击不显示。