Javascript 附加事件处理程序_Javascript_Jquery_Click_Handler

Javascript 附加事件处理程序

javascript jquery

Javascript 附加事件处理程序,javascript,jquery,click,handler,Javascript,Jquery,Click,Handler,我对第二个事件处理程序有问题。这有点复杂，因为我将脚本加载到另一个页面（我无法修改该页面），而该脚本会对单击事件做出反应。例如，当我点击客户端页面上的任何段落时，我的脚本都会显示“cliked”警报。如果客户没有自己的点击处理程序，它就可以工作。什么时候我的点击功能永远不会运行此时脚本非常简单： jQuery('body').click(function(event){ alert('clicked'); }); 有什么提示吗？对不起，我说的是英语。据我所知，客户端可能会阻止事件从

我对第二个事件处理程序有问题。这有点复杂，因为我将脚本加载到另一个页面（我无法修改该页面），而该脚本会对单击事件做出反应。例如，当我点击客户端页面上的任何段落时，我的脚本都会显示“cliked”警报。如果客户没有自己的点击处理程序，它就可以工作。什么时候我的点击功能永远不会运行

此时脚本非常简单：

jQuery('body').click(function(event){
  alert('clicked');
});

有什么提示吗？

对不起，我说的是英语。

据我所知，客户端可能会阻止事件从已注册单击处理程序的元素传播

由于要将事件处理程序注册到

主体

元素，因此只有在特定元素中触发的事件被传播到

主体

元素时，才会触发事件处理程序

一个可能的解决方案是将处理程序添加到页面中的所有元素，但这对动态添加的元素不起作用

jQuery('body *').click(function(event){
  alert('clicked');
});

演示：（单击T1不会触发单击事件）

演示：

对于冒泡事件，如

单击

，元素上的处理程序第一次有机会看到该事件，然后才通过DOM树冒泡到祖先，如

正文

。元素上的处理程序可以通过

event.stopPropagation（）

取消冒泡。通常，如果他们处理事件，他们会这样做

您不能将事件放在页面自身附加的处理程序之前，至少不能以任何直接的方式，因为即使您将处理程序附加到实际元素，它们也会按照附加的顺序执行，因此您的处理程序也会放在其他处理程序之后。这没关系，除非它们使用

event.stopImmediatePropagation（）

，这会阻止连附加到同一元素的其他处理程序也被调用

一个例子很有帮助：让我们看看这个HTML：

<body>
   <div id="target">........</div>
</body>

如果我单击

div

，我们将在控制台中获得以下内容：|

现在，点击一下，我们会发现：|

第一直接处理程序

我们甚至没有收到对第二个处理程序的调用，因为第一个处理程序停止了立即传播。

问题可能是客户端正在阻止事件传播，在这种情况下，您可能运气不好。应用事件侦听器时元素也一定准备好了？谢谢，对于reach解释：）@PiotrWójcik：请注意，您正在钩住大量元素上的

单击。：-）@T.J.Crowder这就是我为什么说肮脏的解决方案；（将处理程序添加到document@ArunPJohny：我想。：-@T.J.Crowder另一个可能的解决方案是识别阻止传播的元素并以它们为目标，而不是以所有元素为目标。因此，我花了一些时间来处理这个“body*”，而将许多元素挂钩是一个问题。我只能勾住一个元素@ArunPJohny你能给我任何提示吗，我如何识别阻止Elemenet从其他脚本中删除的元素？
$("#target").click(function() {
    console.log("First direct handler");
});
$("#target").click(function() {
    console.log("Second direct handler");
});
$(document.body).click(function() {
    console.log("'body' handler");
});

First direct handler
Second direct handler
'body' handler
$("#target").click(function(e) {
    console.log("First direct handler");
    e.stopPropagation();
});

First direct handler
Second direct handler
$("#target").click(function(e) {
    console.log("First direct handler");
    e.stopImmediatePropagation();
});

First direct handler