2011-02-02 102 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

相關問題