事件在jQuery冒泡

我不知道我應該如何解決jQuery中的以下事件冒泡情況。事件在jQuery冒泡

我有一個列表元素（li），其中有一個點擊事件的鏈接。我想對li元素做一個動作，如果用戶點擊列表元素中的一個鏈接，就會調用鏈接事件（單擊）並調用li上的動作（當li或任何內部被點擊時，我總是希望觸發li上的點擊事件）。

我該如何做到這一點？

這裏的HTML代碼：

<li> 
    <img src="images/img.png" /> 
    <a href="/remote/path" data-remote="true">Link</a> 
</li>

和jQuery代碼（obviosly將無法正常工作）：

$("li a").click(function(e) { 
    e.preventBubble = true; 
}); 

$("li").click(function() { 
    $el = $(this).find('a'); 
    $el.click(); 
    $(this).addClass('active'); 
});

什麼是最優雅的解決方案呢？

感謝您的幫助！

來源

2013-08-31 Aljaz

這是不是很清楚你想做什麼。 – Itay

如果我理解你的話，你應該使用jQuery .stopPropagation()而不是自己實現這個。

event.stopPropagation（）

描述：向上冒泡DOM樹，防止任何父處理程序從被通知該事件的阻止事件。

和實現：

$("li a").click(function(e) { 
    e.stopPropagation(); 
});

來源

2013-08-31 10:22:46 Itay

問題是，我仍然得到「太多的遞歸」錯誤，我認爲這是因爲事件冒泡，當我點擊元素。你知道爲什麼會這樣嗎？ – Aljaz

這裏是JS的小提琴：http://jsfiddle.net/UWn4e/ – Aljaz

我認爲問題是，它會循環調用函數..請參閱鏈接 – Aljaz

嘗試使用event.stopPropagation()或event.stopImmediatePropagation()

$("li a").click(function(e) { 
    e.stopPropagation(); 
});

通常我用來做這個使用return false;或event.preventDefault()

更好的去與將返回false;，檢查出原因here

e.preventDefault()將防止發生的歷史默認情況下， e.stopPropagation()會阻止事件冒泡和 return false將兩者都做。

從你fidde，沒有必要有2個功能li和a。

你已經有一個這樣

<ul id="some_list"> 
    <li> <a href="/remote-path" data-remote="true">Some link</a> 
    </li> 
</ul>

這似乎li == a，那麼你爲什麼要2個不同的功能。

嘗試這種方法，並檢查JSFiddle以瞭解原因。

<ul id="some_list"> 
    <li> 
     <a href="/remote-path" data-remote="true">Some link</a>Text apart from a 
    </li> 
</ul>

來源

2013-08-31 10:25:37 Praveen

事件在jQuery冒泡

回答

相關問題