检测用户在div外部的点击次数

我向用户显示模式/灯箱。当用户点击一个按钮时，模式显示，页面的其余部分变暗。通常的东西。检测用户在div外部的点击次数

但是我想这样做。如果用户点击模态外的任何元素，我希望模态消失，页面恢复正常。

这怎么办？我知道我可以为身体设置一个onclick事件，然后检查事件目标是否是我的模态，但是如果用户点击模态中的链接/文本框/按钮怎么办？在这种情况下，目标不会是模态。我该如何解决这个问题？

有没有办法检查事件目标是否包含在<div id="modal"></div>中，所以如果是这样，我不会关闭模态，如果没有，这意味着用户在模态外单击，我可以关闭它吗？

来源

2013-01-12 Click Upvote

你可以把一个div放在填充整个空间的模式下，并将你的点击处理程序附加到它。

来源

2013-01-12 07:01:59 Arnaud

有趣---- –

我会去与@roXon的解决方案。这是一个更好的实现，如果你需要改变你的html –

这只是一个工作（或一个很好的功能，但取决于）。这意味着需要额外的代码来创建一个全尺寸的元素，另外它还会阻止与其他（模态外）文档元素之间的任何交互，从而使点击无效。因此，如果您不打算放置**不透明**（可见）全层 - 在用户体验方面，这是要避免的。 –

jsBin demo

$(document).mouseup(function(e){ 
    if(e.target.id !== 'modal'){ 
    $('#modal').hide(); 
    } 
}); 

$('#modal').mouseup(function(e){ 
    e.stopPropagation(); // prevent mouseup propagate to underneath layers 
});

来源

2013-01-12 07:02:05

这看起来比我的回答更好:) – Arnaud

@Arnaud编辑我的答案与哈演示:)现在它甚至更好:) thx！ –

不要工作，如果我点击模态的孩子 – imos

$("body").click(function(e){ 
    if(! $(e.target).closest("#modal").length){ 
     $('#modal').hide(); 
    } 
});

demo

来源

2013-01-12 07:10:40 imos

因此，每次点击页面时（关闭了Modal），这段代码都会无端运行dom树搜索一个'.closest（）'元素...恕我直言：不好。 –

@roXon是的，但它的工作原理应该如此。在[jQuery UI对话框]中使用的相同方法（https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L682） – imos

感谢您的链接！难以置信 –

另一种方法：

var mouseOverModal = false; 

$(document).click(function(e){ 
    if (! mouseOverModal){ 
     // close modal 
    } 
}); 

$('#modal').bind("mouseenter mouseleave", function(e){ 
    mouseOverModal = ("mouseenter" == e.type); 
}) 

$('#open-modal-handler').click(function(){ 
    // open modal 
    return false; // <- IMPORTANT 
})

来源

2013-01-13 06:58:56 imos

检测用户在div外部的点击次数

回答

相关问题