2010-09-27 220 views
3

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

所以,它看起來像這樣:

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

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

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

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

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

回答

0

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

0

嘿,夥計們,感謝您的幫助。不幸的是,我想我可能會無意中遺漏了一條重要的信息。在這種情況下,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>