鼠标右键单击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的更新日志中搜索了一下，但没有找到相关消息。

有人能解释一下这种行为吗？谢谢！

- misterwolf

Answer 1

默认情况下，所有浏览器都会捕获右键单击事件，可以使用addEventListener('contextmenu')来实现，否则右键单击将打开窗口并显示一些选项（每个浏览器的选项略有不同）。

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

此外，这是Mozilla文档在鼠标事件部分所说的内容，尽管（ANY button）的内容直到将侦听器添加到document对象后才被激活。

点击：一个指针设备按钮（任何按钮；即将成为主按钮）已经在元素上按下并释放。

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

- RzoQe

---

这是最重要的收获！在Firefox中，当您将addEventListener（'click'）添加到文档对象时，它将捕获文档上的任何鼠标点击事件（左键，右键，滚轮），并禁用此右键行为。 - Jared Christensen