如何解决用户何时在div之外单击时的jQuery事件?
| 每当用户在div之外单击以隐藏该div时,是否可以调用任何事件? 我尝试使用$(document).click()
,但是即使用户单击应该显示div的链接,该名称也会被调用。因此,单击处理程序事件将显示div,并立即将“ 0”隐藏起来,这意味着从不显示div。
有想法吗?
解决方法
您可以尝试将onclick事件处理函数委派给body元素(或其他合适的父容器),并测试目标元素是否为揭示链接:
$(\"body\").click(function(e) {
if(e.target.id == \"idOfLinkToShowDiv\") {
$(\"#idOfTheDiv\").show();
} else {
$(\"#idOfTheDiv\").hide();
}
});
可以使用.toggle
缩短以上内容:
$(\"body\").click(function(e) {
$(\"#idOfTheDiv\").toggle(e.target.id == \"idOfLinkToShowDiv\");
});
另一种方式:
$(\"body\").click(function() {
$(\"#idOfTheDiv\").hide();
});
$(\".showLink\").click(function(e) {
e.stopPropagation();
$(\"#idOfTheDiv\").show();
});
,单击任何元素后,请检查该元素的ID是否与您要隐藏的元素匹配。如果不是,请将其隐藏。
$(\"*\").click(function(){
if(this.id === \"hideMe\"){
return false;
}
else{
$(\"#hideMe\").hide();
}
});
在jsFiddle上查看演示
,是。在显示div之后,仅然后绑定click事件以隐藏div(到文档主体)。然后,在显示的div本身上,捕获click()事件,并防止在div click()上传播。 div外部的任何单击都将隐藏,内部的任何单击都不会冒泡到文档中。
function hideDiv(){
$(\'#someDiv\').hide();
$(document.body).unbind(\'click\',hideDiv);
}
$(\'#someLink\').click(function(){
$(\'#someDiv\').show().click(function(e){ e.stopPropagation(); });
$(document.body).bind(\'click\',hideDiv);
});
,一种解决方法是检查单击了哪个元素。
另一个解决方案可能是:
<body>
<div class=\"infopane\"></div>
<div class=\"wrapper\">
content of page
</div>
</body>
所以我可以做:
$(\'.wrapper\').click(function() {
$(\'.infopane\').hide();
});
,您正在寻找外部事件插件。超级好用
http://benalman.com/projects/jquery-outside-events-plugin/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。