2011-02-02 99 views
1

我正在寻找一种方法来阻止事件侦听器在另一事件侦听器确认继续进行之前接收到该事件的任何通知。拦截JavaScript事件调用(添加一个事件侦听器,始终首先调用或替代)

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

提供一些背景:

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

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

我尝试的解决方案:

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

问题与此的是,“项目链接”的元素已经有一个(Java)的Spring AJAX decoration click事件侦听器来更新允许用户修改项目的属性页面的部分,而这之前总是调用显示确认的事件侦听器。实际上,我认为我不认为我可以绑定事件监听器以确认在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'仍然是最后被调用的。我做错了什么?

谢谢。

回答

0

使用 addEventListener并将 capture设置为true。

阅读所有关于它在这里:https://developer.mozilla.org/en/DOM/element.addEventListener

更新:

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

更新:

对不起,我太迅速,使用捕捉是一个无用的答案,因为它不会解决你的问题。

我看到做你想做的事情的唯一方法就是使用全局点击委派。这样,您将拥有一个点,所有点击事件都会经过,您可以通过该点控制事件。

但是,您可能不喜欢这种解决方案有几个缺点。一个显而易见的问题是,你可以忘记正常的事件冒泡,因为代表团是基于冒泡阶段的最后一步。另一个是你将不得不以完全不同于你习惯的方式附加事件。这就是说,如果你能忍受这种情况,那么它可能是一种处理点击事件的奇妙方式,我自己也愿意在过去的几年中使用它。您最终只在您的整个页面(document.body)中注册一次单击事件,然后构建一个围绕绑定/解除绑定事件到css选择器的小框架,并在需要时手动触发。

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

+0

一般来说是个好主意,但是:jQuery不会让你指定阶段和(实际上更糟糕的是)IE只支持泡泡阶段。 – 2011-02-02 23:37:38

相关问题