首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在click事件中隐藏元素之外的任何位置?

如何在click事件中隐藏元素之外的任何位置?
EN

Stack Overflow用户
提问于 2009-04-03 15:31:29
回答 19查看 243.7K关注 0票数 123

我想知道当单击页面上的任何位置时,这是否是隐藏可见元素的正确方式。

代码语言:javascript
复制
$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

元素(div、span等)当单击事件发生在元素的边界内时,不应该消失。

EN

回答 19

Stack Overflow用户

回答已采纳

发布于 2009-04-03 16:07:41

如果我理解的话,当你点击任何地方而不是div时,你想隐藏一个div,如果你在div上点击,那么它不应该关闭。你可以用下面的代码做到这一点:

代码语言:javascript
复制
$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

这会将单击绑定到整个页面,但如果您单击有问题的div,它将取消单击事件。

票数 209
EN

Stack Overflow用户

发布于 2012-05-30 09:27:47

从jQuery 1.7开始,有了一种处理事件的新方法。我想我应该在这里回答,只是为了演示我可能如何以“新”的方式来做这件事。如果您还没有,我建议您阅读jQuery docs for the "on" method

代码语言:javascript
复制
var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

这里我们滥用了jQuery的选择器和冒泡事件。请注意,我要确保在之后清理事件处理程序。您可以使用$('.container').one (see: docs)自动执行此行为,但因为我们需要在处理程序中执行条件,这在这里是不适用的。

票数 22
EN

Stack Overflow用户

发布于 2009-07-17 16:02:43

下面的代码示例似乎最适合我。而你可以使用'return false‘来停止对div或它的任何子级的所有事件的处理。如果希望在弹出式div (例如,弹出式登录表单)上具有控件,则需要使用event.stopPropogation()。

代码语言:javascript
复制
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>
票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/714471

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档