Question

有人可以解释为什么未捕获对button1的点击吗？我知道事件return false上的click将停止传播，但它仍应由document.addEventListener('click', function(e) {console.log(e.target);});捕获元素，因为我们试图通过e.target而不是其直接捕获主要元素父元素。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
       return false;
    });
});
</script>
</head>
<body>

<button id="button1">Button1 (dont get captured)</button>
<button id="button2">Button2 (get captured)</button>

  <script>
    document.addEventListener('click', function(e) { 
     console.log(e.target);});
  </script>
</body>
</html>

我无法更改jQuery代码$("#button1").click(function(){return false});，但仍然想在单击button1元素（使用javascript）时捕获它，是否有任何解决方法？

我可以像button1这样将另一个事件处理程序绑定到document.getElementById("button1").addEventListener("click", function(e){console.log(e.target)});上，实际上我想捕获很多元素（具有不同的类和ID），添加事件是不切实际的在每个人的听众面前，我仅以一个按钮为例。，我只是想记录单击哪个元素。

我无法更改页面的jQuery代码或HTML，我只想在chrome控制台中运行一些测试，因此我想捕获被点击的每个元素

谢谢

Answer 1

返回false；阻止浏览器对button1链接执行默认操作。

return false的等效代码是：

$('.button1')
   .click(function (event) {
       event.preventDefault();
       event.stopPropagation();
});

如果您只想停止传播，请使用stopPropagation()。

看看this，并详细了解preventDefault()和stopPropagation()

Answer 2

效率不高，但对我有用

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
       return false;
    });
});
</script>
</head>
<body>

<button id="button1">Button1 (dont get captured)</button>
<button id="button2">Button2 (get captured)</button>

  <script>
 elements = document.querySelectorAll('body *');
elements.forEach(function(elem) {
    elem.addEventListener('click', function(e){
      console.log(e.target); // or simply console.log(elem)
});
    });
  </script>
</body>
</html>

感谢所有人，特别是给我这个想法的@mplungjan

JavaScript返回false和event.target

2 个答案: