javascript - 右键单击停止传播

Question

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

[编辑] 将代码更改为 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>

score 2 · Accepted Answer

“右键单击”事件称为“上下文菜单”事件。

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>

score 0 · Accepted Answer

由于某种原因，Chrome 不会执行脚本标签，包括 version ，所以我替换let为var...

停止从tocontextmenu触发的事件的传播对我来说很好，在Chrome和Firefeox中，这是我使用的示例。a#Linkdocument

编辑

上下文菜单事件被文档元素检测为点击事件。

在这种情况下，您可以使用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

javascript - 右键单击停止传播

2 回答 2

Related

Reference