點擊收聽因嵌套元素

我有以下的聽衆開火兩次：點擊收聽因嵌套元素

$('td').on('click', '.time_note', function (e) { // When the user clicks the note div 
    alert('note click'); 
}); 

$('table').on('click', 'td', function(e) { 
    alert('time click'); 
});

我需要根據音符是否被點擊或單擊整個小區的兩個不同的動作。然而，我試過這樣做，如果點擊了音符 - 單元格也是如此。隨後，這兩項行動都被解僱。非常有意義。

但是，我不希望發生這種情況。如果點擊該音符，整個單元的動作不應該觸發，反之亦然。有什麼方法可以實現這一目標？我試圖使用.off，但那沒有奏效。

來源

2012-03-21 Cody

http://api.jquery.com/event.stopPropagation/ – j08691 2012-03-21 20:54:31

~~你不能......~~

你不能阻止傳播，除非這兩個事件是代表事件。

由於.live（）方法在事件傳播到文檔頂部時處理事件，因此無法停止傳播實時事件。同樣，由.delegate（）處理的事件將傳播到它們所委託的元素;在調用委託事件處理程序時，已經在DOM樹中的任何元素上綁定了事件處理程序。因此，這些處理程序可以通過調用event.stopPropagation（）或返回false來防止委託處理程序觸發。

docs

注：on就像是在這種情況下delegate。我想他們只是沒有更新的文檔...

更新：

它可以工作，如果這兩個事件都代表事件：@josef DEMO。 DEMO

什麼是委託和直接的事件之間的區別：

事件處理程序僅綁定到當前

如果其他事件沒有委託它不會工作選定的元素;它們必須在代碼調用.on（）時存在於頁面上。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入頁面，請在將新的HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委託事件來附加事件處理程序，如下所述。

委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中的視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此在不等待文檔準備就緒的情況下在其中附加事件是安全的。

來源

2012-03-21 20:53:58 gdoron

不知道爲什麼你說我不行，我剛試過了'stopPropagation'和它出色的作品.. – Cody 2012-03-21 21:26:37

@DoctorOreo。它取決於DOM以及您試圖阻止的處理程序。我會做一個小提示向你展示。 – gdoron 2012-03-21 21:34:26

@DoctorOreo。檢查[this]（http://jsfiddle.net/HvQuk/1/）小提琴。你的作品只是因爲它們都是委託事件。 – gdoron 2012-03-21 21:37:07

嘗試檢查event.currentTarget：

$('table').on('click', 'td', function(e) { 
    if(e.currentTarget.tagName.toLowerCase() == 'td') { 
     alert('time click'); 
    } else { 
     alert('note click'); 
    } 
});

你可以找到更多信息here

來源

2012-03-21 21:03:58

DEMO

是這樣：.note的處理程序是在td。點擊.note，事件冒泡達到td，在那裏觸發它的處理程序。 但你並沒有在那裏停止。事件冒泡到根，點擊一個子元素就是點擊它的祖先的代名詞。這就是爲什麼它像點擊td的處理程序在table。

提前，你應該預防它。

$(function() { 

    $('td').on('click', '.note', function(e) { 
     alert('note click'); 
     return false; //prevent bubbling to the second handler 
    }); 

    $('table').on('click', 'td', function(e) { 
     alert('td click'); 
    }); 

});

來源

2012-03-21 21:32:34 Joseph

點擊收聽因嵌套元素

回答

相關問題