Firefox 鼠标右键点击触发点击事件答案

【问题标题】：Mouse right click on Firefox triggers click eventFirefox 鼠标右键点击触发点击事件
【发布时间】：2017-03-31 15:59:11
【问题描述】：

我注意到在 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 更新日志，但没有关于此的消息。

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

【问题讨论】：

标签： javascript firefox mouse right-click

【解决方案1】：

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

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

此外，这是Mozilla documentation 在鼠标事件 部分中所说的，尽管在将侦听器添加到@ 之前不会激活 (ANY button) 内容987654326@对象

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

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

【讨论】：

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