使用 jquery 确定是否单击了 div 中的任何元素

Question

如果单击了 div (panel1) 中的任何元素，我如何使用 jQuery 判断？ 我有这段代码用于显示/隐藏弹出窗口：

$('body').click(function (e) {
        if ($(e.target).attr('id') == 'link1') {
            $('#panel1').show();
        } else {
            $('#panel1').hide();
        }
    });

问题是，如果我单击 panel1 中的任何控件/元素，弹出窗口 (panel1) 就会消失。 我想让 panel1 保持打开状态，除非单击 panel1 之外的区域（或者再次单击 link1）。 如何修改此代码以实现此目的？ 谢谢...

Answer 1

尝试这个

$('#panel1').click(function (e) {
       e.stopPropagation();
       //Other code if you want to execute anything on panel click.
    });

$('body').click(function (e) {
       if($("#panel1").is(":visible")) 
          $('#panel1').hide();
    });

Answer 2

制作以下 html 标记：

<body>
<div id="div1">
... all the body content here
</div>
<div id="panel1">
</div>

我想弹出 #panel1 无论如何都位于正常流程之外，所以没问题。 然后在 jquery 中使用 div1 而不是 body 就是这样:-)

Answer 3

$('body').click(function (e) {
        if ($(e.target).attr('id') == 'link1') {
            $('#panel1').show();
        } else if($(e.target).attr('id') != 'panel1') {
           $('#panel1').hide();
        }
    });