Javascript 如何识别何时在弹出窗口外进行了点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28558865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to identify when a click is made outside the popup window?
提问by Mathias Spurr
I have a popup window which disappears on click inside, but my purpose is to make it disappear on click outside.
我有一个弹出窗口，它在点击内部时消失，但我的目的是让它在点击外部时消失。
At the moment the popup works fine but it disappears whenever I click inside the window. When I click outside the window, it stays. How do I make it work the oppersite way around?
目前，弹出窗口工作正常，但每当我在窗口内单击时它就会消失。当我在窗口外单击时，它会停留。我如何让它以 oppersite 的方式工作？
Code as:
代码为：
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('.invite_room_btn').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('.invite_room_btn'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
And HTML is:
而 HTML 是：
<span class="invite_room_btn">
<div class="messagepop pop">
</div>
</span>
Thanks!
谢谢！
回答by Danilo
Your question can be interpreted as "how to identify when the click is made outside the popup window"?
您的问题可以解释为“如何识别何时在弹出窗口外进行点击”？
as suggested here, you can work by difference, checking that the click occurred anywhere but the popup window (and eventually some other elements)
正如这里所建议的，您可以通过差异来工作，检查点击是否发生在弹出窗口之外的任何地方（以及最终的一些其他元素）
This can be achieved as follows:
这可以通过以下方式实现：
the HTML code may be something like:
HTML 代码可能类似于：
<div id="popup" class="popup">
Content
<div>DIV inside</div>
</div>
<button id="open">Open</button>
while the javascript is:
而 javascript 是：
$(document).ready(function () {
$('#popup').hide()
});
$('#open').on('click', function () {
$('#popup').show(500)
});
$(document).mouseup(function (e) {
var popup = $("#popup");
if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(500);
}
});
Full example with some CSS-styling: http://jsfiddle.net/sLdmxda8/2/
带有一些 CSS 样式的完整示例：http: //jsfiddle.net/sLdmxda8/2/
回答by Mathias Spurr
I figured it out with the following code!
我用下面的代码弄明白了！
$(document).ready(function () {
$('.messagepop').hide()
});
$('.invite_room_btn').on('click', function () {
if($(this).hasClass("selected")) {
var popup = $(".messagepop");
popup.hide(150);
$(".invite_room_btn").removeClass("selected");
}
else {
$('.messagepop').show(150);
$('.invite_room_btn').addClass("selected");
}
});
$(document).mouseup(function (e) {
var popup = $(".messagepop");
if (!$('.invite_room_btn').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide(150);
}
});
Thanks for the help!
谢谢您的帮助！
