单击包含的元素也有效（但错误地）单击其容器

Question

这是 the problem page I'm developing.

考虑最左边的列标题，标题文字“ Undr ”。以下是该列标题的简化html：

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

用户可以在列标题中执行以下两项操作：

1. 单击列标题，选择并取消选择列。 编辑：当列标题为黄色背景时，会选择该列;列标题为白色背景时未选中。

2. 通过单击上/下箭头图像选择列内容的升序或降序排序。

但是，单击图像也会选择/取消选择我不想要的列。当他点击图片时，我只想切换排序顺序;我不想切换列上的选择。

我的JavaScript函数toggleColSortOrder();确实只切换排序顺序;但似乎 选择 的功能，当用户点击图片时，该列也会被调用（错误地）。

我尝试过的事情：认为这可能在某种程度上是工作中冒泡的表现，我尝试了在两个函数中的每个函数中返回true，false和nothing的所有组合。这些都没有任何影响。我想避免进一步破解JavaScript。

问题：如果通过更改我的html或css，我可以阻止在用户点击向上/向下箭头图像时调用函数toggleColSelect();吗？

Answer 1

您可以通过添加

取消事件冒泡

event.cancelBubble = true;

到你的功能。看到这个小提琴：http://jsfiddle.net/fcyCz/

Answer 2

以下是我的理论，因为您的<img>标记位于<th>标记中，如果没有首先点击<img>，就无法点击<th>。如果有办法取消嵌套这两个标签，我会假设它们的功能将被单独调用。可能使用<div>将<img>与正确的位置对齐。我将尝试使用firebug进行现场调整，并查看（如果它没有破坏javascript）如果它有效，我会报告回来。

祝你好运。

Answer 3

正如Tomalak指出的那样，<img>的点击事件正在冒泡到父<th>，因此您必须在您的函数中另行指定。另外，为browsers which have deprecated cancelBubble添加event.stopPropagation()的来电。