如何解决单击DIV元素的外部而不是内部时如何关闭/隐藏DIV元素
|| 我在页面上存在一个<div>
,因此需要进行设置,以便当用户在该元素之外单击时它将被隐藏,但是如果用户在该元素内的某个位置单击,则应保留该位置。
我尝试使用
e.stopPropagation();
和
e.preventDefault();
将其添加到该特定DIV的click事件中,但这无效。
谢谢!
解决方法
在弹出式鼠标悬停时切换标志:
JSBin演示
var $pop = $(\'#popup\'),notHov = 1; // Hover flag
$pop.hover(function(){ notHov^=1; }); // Toggle flag on hover
$(document).on(\'mouseup keyup\',function( e ){
if(notHov||e.which==27) $pop.fadeOut();
});
注意:
如果页面上的某处有一个元素,则可以防止ѭ4bubble使DOM树冒泡达到document
(以便注册),您可能想要创建一个全屏(如页面覆盖)弹出包装器来注册单击事件,仅在选择器上方的代码中进行更改:代替$(document)
将是$(\'#popupWrapper\')
,可能最简单的方法是监视整个文档的点击,如果不是那个元素,则忽略它。如果是,则将其隐藏。
(function(div) {
$(document).click(function(e) {
if (e.srcElement !== div) $(div).hide();
});
})($(\'div\')[0]);
编辑:Derp,被误解,请单击内部,否则将隐藏...反转相等性检查。
http://jsfiddle.net/robert/QcPx4/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。