多個onClick事件觸發

我有幾個互相嵌套的div。每個人都有自己的onclick事件。所以，想象它就像一個三明治，底層是麪包（這層比地裏嵌套的大），然後是生菜，然後是番茄。多個onClick事件觸發

所以，它看起來像這樣：

--------------------------- 
| Bread     | 
|       | 
| ----------------------- | 
| | Lettuce    | | 
| |      | | 
| | ------------------- | | 
| | |Tomato   | | | 
| | |     | | | 
| | | <*click>  | | | 
| | |     | | | 
| | |     | | | 
| | ------------------- | | 
| ----------------------- | 
---------------------------

目前，當用戶點擊的番茄，它觸發關閉番茄正確的順序，但隨後事情出差錯。因爲一旦它發射番茄，它遞歸地發射生菜，最後是麪包。

我想這是因爲技術上用戶DID在這些div內單擊，但只是因爲番茄嵌套在它們內部。

它的方式應該的工作是，如果用戶點擊三明治的番茄部分，那麼它應該只發射番茄的事件。另一方面，如果用戶點擊在番茄後面偷看的萵苣部分，則應該開火生菜。

所以，我的問題是，是否有可能使點擊「不透明」，以便即使它們嵌套在對方內，只有實際點擊的點數。

來源

2010-09-27 DenverMatt

您可以在當前的處理程序代碼之後添加return false以防止點擊冒泡或傳播......這是導致父元素上的click事件的原因。

爲了更好地理解發生了什麼，我建議閱讀以下內容：quirksmode.org's excellent explanation of event bubbling。

來源

2010-09-27 23:35:41

在非IE瀏覽器中event.stopPropagation();會阻止事件冒泡到父節點，在IE中，event.cancelBubble = true;應該這樣做。 event是傳遞給偵聽器的參數。

來源

2010-09-27 23:40:15

嘿，夥計們，感謝您的幫助。不幸的是，我想我可能會無意中遺漏了一條重要的信息。在這種情況下，JS實際上是將一個AJAX請求發回服務器。因此，出於某種原因，在這種情況下，事件處理程序的「返回錯誤」不起作用。

我懷疑對服務器的XMLHttpRequest調用可能是同時被觸發的。

但是，我能夠通過將塊級（空）<a>標籤在div裏面，然後把我的單擊事件的<a>標籤，而不是<div>來解決這個問題。

所以我就改從這個代碼：

<div class='container' id='idstring' onclick="ajaxcall(parameters)"> 
    <? server-side call to recursive function ?> 
</div>

要這樣：

<div class='container' id='idstring'><a onclick="ajaxcall(parameters)"> 
    <? server-side call to recursive function ?> 
</a></div>

來源

2010-09-28 02:21:51 DenverMatt

多個onClick事件觸發

回答

相關問題