點擊包含的元素也有效（但錯誤地）點擊其容器

這是the problem page I'm developing.點擊包含的元素也有效（但錯誤地）點擊其容器

考慮最左邊的列報頭，與標題文本「Undr」。下面是該列標題簡化HTML：

<th class="underlying" onclick="toggleColSelect(this);"> 
    <img class='ad' onclick="toggleColSortOrder(this);"> 
    Undr 
</th>

用戶可以做兩件事情在列標題：

選擇和取消選擇列，單擊列標題。 編輯：當列標題具有黃色背景時選擇列;並在列標題具有白色背景時取消選擇。
通過單擊向上/向下箭頭圖像在列內容上選擇升序或降序排序。

但是，點擊圖片也會選擇/取消選擇我不想要的列。當他點擊圖片時，我只想切換排序順序;我不想在列上切換選擇。

我的JavaScript函數toggleColSortOrder();確實只切換排序順序;但它似乎功能選擇該列也被調用（錯誤），當用戶點擊圖像。

我所嘗試過的：認爲這可能在某種程度上是工作中起泡的表現，我嘗試了在兩個函數中都返回true，false和nothing的所有組合。這沒有任何影響。我想避免進一步攻擊JavaScript。

問題：如何通過更改我的html或css來防止在用戶點擊上/下箭頭圖像時調用函數toggleColSelect();？

來源

2011-06-14 Pete Wilson

我在使用Chrome的網站上看不到問題。你使用的是什麼瀏覽器？哦，如果你想要專門研究javascript的人回答這個問題，請確保你將這個標籤添加到這篇文章中，否則它會被忽視。 – Wex 2011-06-14 18:54:23

@Wex - 謝謝！我應該說什麼構成了一個選定的專欄：這是一個黃色的背景。我添加了該編輯。你會看到（除非我瘋了）該問題出現在Chrome 12.0.742.91中。 – 2011-06-14 19:07:36

@Wex - 你說得對，我很抱歉。這個問題在其他欄目中不會發生。對於那個很抱歉。現在我真的*迷茫:-)我一直在使用Firefox。 – 2011-06-14 19:24:54

你可以通過添加

event.cancelBubble = true;

給函數的取消事件冒泡。看到這個小提琴：http://jsfiddle.net/fcyCz/

來源

2011-06-14 18:41:21 Tomalak

這裏是我的理論，因爲你的<img>標籤內，您的<th>標籤，你不能點擊<img>不首先通過<th>「點擊」。如果有一種方法可以取消這兩個標籤的嵌套，那麼我會假設他們的功能將被單獨調用。可能使用<div>將<img>對齊到正確的位置。我將嘗試使用螢火蟲進行實況調整，並且如果它能正常工作，請參閱（如果它不打破javascript），我會回報。

祝你好運。

來源

2011-06-14 18:49:23 CenterOrbit

我確實嘗試使用螢火蟲重做這個，但它打破了javascript函數調用，因此我無法完全測試我的理論。 – CenterOrbit 2011-06-15 23:24:24

正如Tomalak指出的，<img>的點擊事件冒泡到父<th>，所以你必須在你的函數中另外指定。此外，請撥打event.stopPropagation()以撥打browsers which have deprecated cancelBubble。

來源

2011-06-14 19:28:07 mejarc

點擊包含的元素也有效（但錯誤地）點擊其容器

回答

相關問題