如何使用jquery防止在切换区域内切换元素

Question

我有一个jquery切换来使用下面代码中的h2元素显示/隐藏div标签。在那个h2中，我有一个可点击的图像（一个上下文菜单图标）。单击它时上下文菜单工作，但h2也切换div上的显示/隐藏。有没有办法可以取消h2标签内图标上的切换功能？

<h2>Title goes here<img src="context-menu.gif" /></h2>
<div class="panel"></div>

我尝试过在h2标签上叠加图标，但这会给我的设计带来其他复杂问题。同时浮动两个也不是一种选择。

感谢。

Answer 1

单击事件（实际上是 toggle（）绑定到的事件）冒泡DOM，触发目标元素的所有祖先。在这里，您需要使用 event.stopPropagation（）停止<img>元素的传播/冒泡：

$("h2 > img").click(function (evt) {
    // Stop the event from bubbling up and firing the h2's handler
    evt.stopPropagation();

    // Continue on with my code
    showContextMenu();
});