div中的jQuery元素和点击区域答案

【问题标题】：jQuery element in a div and clicking areadiv中的jQuery元素和点击区域
【发布时间】：2010-08-20 23:51:03
【问题描述】：

我有一个名为#bigDiv 的大DIV。在这个 div 中，我还有其他元素，例如菜单和图像。

我希望 jQuery 在每次用户单击 #bigDiv 而不是其他元素（这是该 div 的一部分）时切换 #bigDiv。如何做到这一点？

例如：

index.html:

<div id="bigDiv">
<ul>
<li><a href="site">Site</a></li>
</ul>

jQuery:

$("#bigDiv").click(
function{
$("#bigDiv').toggle();
});

$("li").click(
function{
//do something here
});

此时，当我单击 li elemnt 时，它仍会关闭主 div。我尝试使用 z-index，但它不起作用，因为元素仍然是主 div 的子元素。

谢谢。

【问题讨论】：

在这里查看我对类似问题的回答：stackoverflow.com/questions/3535442/…

标签： jquery html hide toggle show

【解决方案1】：

您可以使用stopPropagation() 防止事件冒泡：

防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

$("li").click(function(event){
    event.stopPropagation();
    //do something here
});

或者，您可以测试在bigDiv 的事件处理程序中单击了哪个元素：

$("#bigDiv").click(function(event){
    var tar;
    if (event.target) targ = event.target;
    else if (event.srcElement) targ = event.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

    if(targ.id == 'bigDiv')
        $("#bigDiv').toggle();
});

也值得一读：quirksmode - Introduction to Events 和 quirksmode - Event properties

【讨论】：