有没有办法在 .stopPropagation() 在点击时执行之前捕获点击事件?

Is there a way to catch click events earlier than .stopPropagation() gets executed onclick?

提问人:Haradzieniec 提问时间:11/23/2022 最后编辑:isherwoodHaradzieniec 更新时间:11/23/2022 访问量:28

问:

目的是捕获所有点击。遗憾的是,单击第一个链接不会显示在控制台中。有没有办法从页面中抓取链接,即使是那些有的链接?document.body.onclick = e => console.log(e.target);stopPropagation()

https://jsfiddle.net/htLw9cxy/

function myFuncCanNotBeEdited(e) {
  e.stopPropagation();
  //...
  //and do some other important code here
}

document.body.onclick = e => console.log(e.target);
<body>
  <div style="border: 1px solid red; padding: 10px;">
    <a href="#" onclick="myFuncCanNotBeEdited(event);">Edit</a>
    <a href="#">Remove</a>
  </div>
</body>

JavaScript 事件 单击“阻止 ”默认 停止传播

评论

0赞 isherwood 11/23/2022
您使用内联 JavaScript 而不是事件侦听器有什么原因吗?
0赞 Pete 11/23/2022
你将不得不在你的链接点击代码中重复你的身体点击代码(也许把它变成一个可以在两者中调用的函数?) - 停止传播的点是阻止点击事件冒泡到父级 - 如果你想让它冒泡,那就不要停止它
0赞 isherwood 11/23/2022
仅供参考,锚点不应用于操作。使用按钮(或具有按钮角色属性的其他元素)。
0赞 Haradzieniec 11/23/2022
> 您使用内联 JavaScript 而不是事件侦听器有什么原因吗?- 不,没有。如果代码被重构,问题的正确答案会改变吗?
1赞 Keith 11/23/2022
有,但真的很骇人听闻,你想看吗?

答:

1赞 Keith 11/23/2022 #1

好吧,这真的很麻烦,所以要小心,因为它涉及修改内置原型。

您可以全局截获原型。stopPropagation

下面我敲出了一个非常简单的片段,您可以扩展以进行更多检查,确保它是一个链接等。

const oStop = PointerEvent.prototype.stopPropagation;

PointerEvent.prototype.stopPropagation = function (e) {
  console.log(this.target);
  oStop.call(this);
}

function myFuncCanNotBeEdited(e) {
  e.stopPropagation();
}

document.body.onclick = e => console.log(e.target);
<body>
  <div style="border: 1px solid red; padding: 10px;">
    <a href="#" onclick="myFuncCanNotBeEdited(event);">Edit</a>
    <a href="#">Remove</a>
  </div>
</body>