如何在其外部单击（但不在内部）时关闭/隐藏DIV元素

时间：2022-08-26 19:53:51

I have a <div> that exists on a page and I need to make it so that when the user clicks outside of that element it will become hidden, but if the user clicks somewhere within the element, then it should stay.

我有一个

存在于页面上，我需要这样做，以便当用户点击该元素外部时它将被隐藏，但如果用户点击元素中的某个位置，那么它应该保留。

I tried using
e.stopPropagation();
and
e.preventDefault();

我尝试使用e.stopPropagation（）;和e.preventDefault（）;

adding it to the click event of that certain DIV but that didn't work.

将它添加到某个DIV的click事件但是没有用。

Thanks!

谢谢！

2 个解决方案

#1

4  

Toggle a flag on popup hover:

在弹出窗口悬停时切换标志：

JSBin demo

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();
});

Note:
if somewhere on the page you have an element the prevents the mouseup event to bubble up the DOM tree reaching document (in order to be registered), you might want to create a full-screen (like an page-overlay) popup wrapper to register the click events, changing in the code above just the selector: instead of $(document) would be $('#popupWrapper')

注意：如果页面上某处有一个元素可以阻止mouseup事件冒泡到DOM树到达文档（为了注册），你可能想要创建一个全屏（如页面覆盖）弹出包装器注册点击事件，只在选择器上面的代码中更改：而不是$（文档）将是$（'＃popupWrapper'）

#2

2  

Probably the easiest way to do this will be to monitor clicks on the entire document, and ignore it if it's not that element. If it is, then hide it.

可能最简单的方法是监控整个文档的点击次数，如果不是那个元素，则忽略它。如果是，则隐藏它。

(function(div) {
    $(document).click(function(e) {
        if (e.srcElement !== div) $(div).hide();
    });
})($('div')[0]);

Edit: Derp, misunderstood, click inside should stay, otherwise hide... invert the equality check.

编辑：Derp，误解，点击里面应该留下，否则隐藏...反转相等检查。

http://jsfiddle.net/robert/QcPx4/

http://jsfiddle.net/robert/QcPx4/

#1

4  

Toggle a flag on popup hover:

在弹出窗口悬停时切换标志：

JSBin demo

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();
});

Note:
if somewhere on the page you have an element the prevents the mouseup event to bubble up the DOM tree reaching document (in order to be registered), you might want to create a full-screen (like an page-overlay) popup wrapper to register the click events, changing in the code above just the selector: instead of $(document) would be $('#popupWrapper')

注意：如果页面上某处有一个元素可以阻止mouseup事件冒泡到DOM树到达文档（为了注册），你可能想要创建一个全屏（如页面覆盖）弹出包装器注册点击事件，只在选择器上面的代码中更改：而不是$（文档）将是$（'＃popupWrapper'）

#2

2  

Probably the easiest way to do this will be to monitor clicks on the entire document, and ignore it if it's not that element. If it is, then hide it.

可能最简单的方法是监控整个文档的点击次数，如果不是那个元素，则忽略它。如果是，则隐藏它。

(function(div) {
    $(document).click(function(e) {
        if (e.srcElement !== div) $(div).hide();
    });
})($('div')[0]);

Edit: Derp, misunderstood, click inside should stay, otherwise hide... invert the equality check.

编辑：Derp，误解，点击里面应该留下，否则隐藏...反转相等检查。

http://jsfiddle.net/robert/QcPx4/

http://jsfiddle.net/robert/QcPx4/

标签：

相关文章