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

这是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

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

回答

相关问题