處理事件中的jquery

IAM具有鏈接bubling如下所示處理事件中的jquery

<a item='1' href='javascript:void(0)'><img class='icon1' /><span>text1</span></a> 
<a item='1' href='javascript:void(0)'><img class='icon2' /><span>text2</span></a> 
<a item='1' href='javascript:void(0)'><img class='icon3' /><span>text3</span></a> 
<a item='1' href='javascript:void(0)'><img class='icon4' /><span>text4</span></a> 


$(function(){ 
$('a').click(_handleClick); 
}); 

function _handleClick(e) 
{ 
var _item=$(e.target).attr('item'); 
// do something with _item variable 
}

//現在我的問題是，當使圖像的「e」在_handleClick接收用戶點擊被圖像，所以我不能讀ATTR ='項目'那麼如何讓事件冒泡讀取該值。

來源

2010-02-06 Praveen Prasad

因爲附加了事件處理程序的'a'元素也存儲'item'屬性，所以根本不需要對事件冒泡進行任何處理。在這種情況下，您只需使用'this'通過點擊事件來引用該項目，$（this）.attr（'item'）將檢索'item'的值。

這條線：

var _item=$(e.target).attr('item');

應該是：

var _item=$(this).attr('item');

編輯：澄清的第一個句子，並且增加了以下信息：

爲了澄清，事件冒泡是自動在jQuery中。如果你點擊一個元素的孩子，這個事件會一路冒泡到頂部，隨着事件的發生而觸發事件。

有時候需要用event.stopPropagation()停止射擊。

還有其他時間它派上用場。例如，考慮一個擁有100個孩子的'div'，所有這些孩子都應該接受相同的點擊事件。您可以將一個單擊事件分配給父級，然後使用event.target來確定實際單擊的事件，而不是消耗它需要的所有資源來維護這100個子級的事件處理程序。

這種方法的另一個好處是，在動態添加額外的子項給父項時，您不必使用live（）。由於他們都因冒泡而觸發父母的點擊事件，因此他們準備好了。

來源

2010-02-06 12:36:26 user113716

但也有錨標記內的兩個元素，而這些很可能是該事件的實際收件人。給出的其他答案看起來更接近父錨，儘管點擊「戳穿」錨點並非不可能。 – Pointy 2010-02-06 12:58:51

@Pointy - 事件附加到'a'元素。不管實際的目標是什麼，事件處理程序在'a'上被調用。導致這一點的是事件冒泡。我的答案的第一句話有點欺騙，所以我會調整它。 – user113716 2010-02-06 13:15:14

ah ok duhh;感謝您的澄清 – Pointy 2010-02-06 13:17:34

試試這個，而不是直接做點擊目標：

$(function(){ 
    $('a').click(function() { 
    var _item = $(this).attr('item'); 
    // do something with _item variable   
    }); 
});

雖然click事件上的所有父元素髮射時，e.target仍是點擊，你點擊了原來最深孩子的來源。與$(this) ..jQuery處理，不需要擔心下面哪個子元素激發它。

來源

2010-02-06 12:29:17

var _item=$(e.target).parents('a').attr('item');

來源

2010-02-06 12:38:16 Leventix

這是一個更好的答案，儘管事件可能不會在錨標記上直接觸發。我認爲最好檢查目標元素是否爲錨點，如果不是，則使用「父母（'a'）」來查找它。 – Pointy 2010-02-06 13:00:41

不需要反思目標的父母，因爲事件會自動冒泡到具有'item'屬性的相同元素。 – user113716 2010-02-06 13:25:15

處理事件中的jquery

回答

相關問題