Question

如何在javascript中停止右键单击事件的传播，因此父元素根本不会检测到它们？当我单击以下html中的链接时，未检测到左键单击，但文档元素将右键单击检测为“单击”事件而不是“contextmenu”事件。我试图将事件监听器附加到mousedown，contextmenu，但没有成功。

[编辑]将代码更改为contextmenu适用于chrome而不是firefox（v23.0.1），这可能是一个firefox错误。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/javascript;version=1.8">

function log(s){
    document.getElementById('log').innerHTML+=s+'<br/>';
}

window.onload=function(){
    document.addEventListener('click',function(e){
        log('click detected');
    },false);

    let link=document.querySelector('a#link');
    //click only cares about left clicks
    link.addEventListener('click',function(e){
        e.stopPropagation();
        return false;
    },false);
};

</script>
</head>

<body>

<a id="link" href="javascript:void(0);">Link</a>

<div id="log"></div>

</body>
</html>

Answer 1

“右键单击”事件称为“contextmenu”事件。

http://www.quirksmode.org/dom/events/contextmenu.html

示例：

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>

function log(s){
        document.getElementById('log').innerHTML+=s+'<br/>';
}

window.onload=function(){
        document.addEventListener('click',function(e){
                log('click detected');
        },false);

        document.addEventListener('contextmenu', function(e){
                log('right-click detected');
        }, false);

        var link=document.querySelector('a#link');

        link.addEventListener('click',function(e){
                e.stopPropagation();
                return false;
        },false);

        link.addEventListener('contextmenu',function(e){
                e.stopPropagation();
                return false;
        },false);
};

</script>
</head>

<body>

<a id="link" href="javascript:void(0);">Link</a>

<div id="log"></div>

</body>
</html>

Answer 2

由于某些原因，Chrome不会执行脚本标记，包括版本，因此我将let替换为var ...

停止从contextmenu到a#Link触发的document事件的传播对我来说很好，在 Chrome 和 Firefeox 中，这是我使用的例子。

修改

文档元素将contextmenu事件检测为click事件。

在这种情况下，您可以使用 mousedown 事件，并添加条件event.which === 3

我更新了示例，并在JSBin

上添加了一个示例

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>

<a id="link" href="javascript:void(0);">Link</a> 
<div id="log"></div>

<script type="application/javascript">
window.onload = function () {
  var link = document.querySelector('a#link');

  function log(s) {
      document.getElementById('log').innerHTML += s + '<br/>';
  }

  document.addEventListener('mousedown', function (e) {
    if (e.which === 3) {
      var src = e.target || e.srcElement;
      log((src.nodeName === 'A' ? 'bubbled' : 'direct') + ' contextmenu on document detected');
    }
  }, false);

  link.addEventListener("mousedown", propagate);

  function propagate(e) {
    if (e.which === 3) {
      log("contextmenu on link, propagating");
      link.removeEventListener("mousedown", propagate);
      link.addEventListener("mousedown", nopropagate);
    }
  }

  function nopropagate(e) {
    if (e.which === 3) {
      log("contextmenu on link, nopropagating");
      e.stopPropagation();
    }
  }
}
</script>
</body>
</html>

现在按以下顺序右键单击可以获得这些输出。

右键点击文件
右键单击链接（首次点击时传播）
右键点击链接（不传播）

屏幕截图来自Firefox 20.0

右键单击停止传播

2 个答案: