Question

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

此时脚本非常简单：

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

任何提示？抱歉我的英文。

Answer 1

形成我所理解的客户端可能阻止事件从已注册点击处理程序的元素传播。

由于您正在向body元素注册事件处理程序，因此只有当特定元素中的触发器一直传播到body元素时才会触发它。

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

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

演示：Problem（点击T1不会触发点击事件）
演示：Solution

Answer 2

对于像click这样的冒泡事件，元素上的处理程序首先获得事件的机会，然后它才会通过DOM树冒泡到像body这样的祖先。元素上的处理程序可以通过event.stopPropagation() 取消冒泡。通常他们会处理这个事件。

您可以＆＃39;吨获取事件提前页附有自己的处理程序，至少不会以任何直接的方式，因为即使你连接你的处理程序的实际元素，他们＆＃39;再在执行他们附加的订单，所以你的订单将会追随其他订单。这没关系，除非他们使用event.stopImmediatePropagation()，这甚至会阻止连接到同一元素的其他处理程序被调用。

示例有帮助：让我们看一下这个HTML：

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

并按以下顺序附加这些处理程序：

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

如果我点击div，我们会在控制台中获取此信息：Live Example | Live Source

First direct handler
Second direct handler
'body' handler

现在，让我们改变第一个处理程序，让其他处理程序保持不变：

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

现在点击一下即可：Live Example | Live Source

First direct handler
Second direct handler

body上的处理程序未被调用，因为第一个处理程序停止了传播。

让我们再次改变第一个处理程序：

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

现在点击一下即可：Live Example | Live Source

First direct handler

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

附加事件处理程序

2 个答案: