拦截JavaScript事件调用（将事件侦听器添加为始终先被调用或替代地被调用）

Question

我正在寻找一种方法，以防止事件侦听器在另一个事件侦听器确认可以继续进行操作之前接收到该事件的任何通知。

我最初的想法是绑定事件监听器，该事件监听器确定是否应触发该元素的所有其他事件监听器，作为链中的第一个事件监听器。 研究了这一点-似乎不可能（至少我无法将事件侦听器绑定到元素的方式结合起来）。

提供一些上下文：

我在网页上有一个项目列表。 当用户单击这些“项目链接”中的一个时，页面的另一区域将填充有一种表单，用户可以在其中修改项目的某些属性。 为了保留修改后的项目的属性，用户必须单击与表单相关的“更新”按钮。

我的目标是确保如果用户在不单击“更新”的情况下修改了项目的属性，但是又单击了另一个“项目链接”，则他们必须确认他们乐于忽略刚刚进行的更改。

我尝试的解决方案：

1. 将更改事件侦听器绑定到将JavaScript'hasChanges'字段设置为true的所有表单元素。
2. 在所有“项目链接”中添加一个类，以将其标识为将导致用户松动更改的链接。
3. 使用jQuery，将click和keypress事件侦听器绑定到此类的所有元素，以在“ hasChanges”为true时显示确认弹出窗口。
4. 如果用户希望保存其更改，请单击“取消”，停止传播事件。

这样做的问题是，“项目链接”元素已经具有（Java） Spring AJAX装饰单击事件侦听器，以更新页面的部分，该部分允许用户修改项目的属性，并且始终在事件侦听器之前调用显示确认。 实际上，我认为我无法绑定事件侦听器以使确认在AJAX装饰之前进行，以确保在更新页面的项目属性表单部分之前显示确认。

有没有人有什么建议？

提前致谢。

更新：

建议的解决方案是将'caputre'标志设置为true。 因此，将事件侦听器添加到“项目链接”的代码现在看起来像这样：

$("." + linkClassName).each(function()
{
    if ($.browser.msie)
    {
        this.setCapture(true);
        this.attachEvent("onclick", _self.linksFunction);
    }
    else
    {
        this.addEventListener("click", _self.linksFunction, true);
    }
});

但是，在单击“项目链接”后调用的所有函数中都添加了日志记录（到FF的控制台），我的函数“ linksFunction”仍然是最后一个要调用的函数。 我做错什么了吗？

谢谢。

Answer 1

使用 addEventListener并将 capture设置为true。

在此处阅读所有内容： https : //developer.mozilla.org/en/DOM/element.addEventListener

更新：

如果需要IE支持，请 使用setCapture 。
它仅支持鼠标事件，但据我所知，这就是您所需要的。

再次更新：

抱歉，我太快了，无法使用捕获是没有用的答案，因为它不能解决您的问题。

我看到要做的唯一方法是使用全局单击委托。 这样，您将在所有事件中都经过一个点，从而可以控制所有点击事件。

但是，您可能不喜欢该解决方案的一些缺点。 一个明显的例子是，您可以忘记正常事件的冒泡，因为委派基于冒泡阶段的最后一步。 另一个是，您将不得不以一种与以往完全不同的方式来附加事件。

就是说，如果您可以接受这一点，那么它可能是一种处理点击事件的绝妙方法，我过去几年本人更喜欢使用这种方法。 您最终在整个页面（在document.body上）仅注册了一次单击事件，然后围绕将事件绑定/解绑定到CSS选择器并根据需要手动触发，构建了一个微型框架。

这种方法的一些好处是，您可以在元素存在之前注册单击事件，因为您不必在元素本身上注册单击事件，如果您例如使用客户端模板动态构建网站，则非常有用。