javascript - 拦截 JavaScript 事件调用(添加事件监听器以始终首先调用或备用)

Question

我正在寻找一种方法来防止事件监听器在另一个事件监听器确认可以继续之前接收到任何事件通知。

我最初的想法是绑定(bind)我的事件监听器，以确定是否应触发该元素的所有其他事件监听器，作为链中的第一个事件监听器。经过调查后 - 这似乎不可能(至少在我将事件监听器绑定(bind)到元素的方式组合中不可能)。

提供一些背景信息:

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

我的目标是确保，如果用户在未单击“更新”的情况下修改项目的属性，但随后单击另一个“项目链接”，他们必须确认他们愿意忽略刚刚所做的更改。

我尝试的解决方案:

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

问题是“item links”元素已经有一个 (Java) Spring AJAX decoration单击事件监听器来更新允许用户修改项目属性的页面部分，并且始终在显示确认的事件监听器之前调用该部分。实际上，我认为我无法在 AJAX 装饰之前绑定(bind)事件监听器以进行确认，以确保在更新页面的项目属性表单部分之前显示确认。

有人有什么建议吗？

更新:

建议的解决方案是将“捕获”标志设置为 true。因此，我向“项目链接”添加事件监听器的代码现在如下所示:

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

但是，在将日志记录(到 Firefox 控制台)添加到单击“项目链接”时调用的所有函数后，我的函数 linksFunction 仍然是最后一个被调用的。我是不是做错了什么？

Answer 1

使用 addEventListener与 capture设置为 true。

在这里阅读所有相关内容:https://developer.mozilla.org/en/DOM/element.addEventListener

更新:

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

再次更新:

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

我认为做你想做的事情的唯一方法是使用全局点击委托(delegate)。这样，您将拥有一个点，所有点击事件都将通过该点，因此您可以通过那里控制事件。

此解决方案有几个缺点，但您可能不喜欢。一个明显的问题是您可以忘记正常的事件冒泡，因为委托(delegate)是基于冒泡阶段的最后一步。另一个问题是您必须以与习惯完全不同的方式附加事件。

也就是说，如果您能接受这一点，它可能是一种处理点击事件的绝佳方式，我自己在过去几年中更喜欢使用这种方式。您最终只会在整个页面(在 document.body 上)中注册一个单击事件，然后围绕将事件绑定(bind)/取消绑定(bind)到 css 选择器以及在需要时手动触发构建一个小型框架。

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