拦截JavaScript事件调用(添加事件侦听器以始终首先调用或替代)

时间:2011-02-02 23:05:01

标签: javascript jquery spring javascript-events

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

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

提供一些背景信息:

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

我的目标是确保如果用户修改项目的属性而不点击“更新”但点击另一个“项目链接”,他们必须确认他们很乐意忽略他们刚刚做出的更改。

我尝试过的解决方案:

  1. 将更改事件侦听器绑定到将JavaScript“hasChanges”字段设置为true的所有表单元素。
  2. 向所有“项目链接”添加一个类,将其标识为将导致用户松散更改的链接。
  3. 使用jQuery,将click和keypress事件侦听器绑定到此类的所有元素,以便在'hasChanges'为真时显示确认弹出窗口。
  4. 如果用户希望保存更改,请单击取消,停止传播事件。
  5. 问题是'item links'元素已经有一个(Java)Spring AJAX decoration click事件监听器来更新允许用户修改项目属性的页面部分,并且总是会调用它在显示确认的事件侦听器之前。实际上我不认为我可以绑定事件监听器以确认在AJAX装饰之前继续进行,以确保在更新页面的项目属性表单部分之前显示确认。

    有人有任何建议吗?

    提前致谢。

    更新

    建议的解决方案是将'caputre'标志设置为true。所以我的代码为'item links'添加一个事件监听器现在看起来像这样:

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

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

    感谢。

1 个答案:

答案 0 :(得分:0)

使用addEventListener设置为true时使用capture

在此处阅读所有相关信息:https://developer.mozilla.org/en/DOM/element.addEventListener

更新

如果需要IE支持,use setCapture 它只支持鼠标事件,但据我所知,这就是你所需要的。

再次更新:

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

我看到你想做的唯一方法就是使用全局点击授权。通过这种方式,您将获得一个单点,您的所有点击事件都将通过该点,您可以通过那里控制事件。

此解决方案有几个缺点,但您可能不喜欢。一个显而易见的问题是,您可以忘记正常的事件冒泡,因为委托是基于冒泡阶段的最后一步。另一个是你必须以一种与以往完全不同的方式来附加事件。

也就是说,如果你可以忍受这种情况,它可以成为处理点击事件的绝妙方式,我自己过去几年都喜欢使用点击事件。您最终只在整个页面中注册了一个单击事件(在document.body上),然后构建一个围绕绑定/解除绑定事件到css选择器的小框架,并在需要时手动触发。

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