Javascript return false and event.target



有人可以解释为什么点击button1没有被捕获吗?我知道事件clickreturn false会停止传播,但它仍然应该通过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(,有什么解决方法吗?

我可以将另一个事件处理程序绑定到这样的button1document.getElementById("button1").addEventListener("click", function(e){console.log(e.target)});实际上有很多我想捕获的元素(具有不同的类和 id(,为每个元素添加一个事件侦听器是不切实际的,我展示了一个按钮只是为了一个例子。 ,我只是想记录单击的任何元素。

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

谢谢

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

return false的等效代码为:

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

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

看看这个,并阅读更多关于 preventDefault(( 和 stopPropagation(( 的信息

效率不是很高,但对我有用

<!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给了我这个想法

最新更新