javascript - 单击包含的元素也会有效地(但错误地)单击其容器

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;

你的功能。看到这个 fiddle :http://jsfiddle.net/fcyCz/