有人可以解释为什么点击button1
没有被捕获吗?我知道事件click
return 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(,有什么解决方法吗?
我可以将另一个事件处理程序绑定到这样的button1
document.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给了我这个想法