如何识别何时在弹出窗口外进行点击window？

Question

我有一个弹出窗口 window 在内部点击时消失，但我的目的是让它在外部点击时消失。

目前弹出窗口工作正常，但每当我在 window 中单击时它就会消失。当我在 window 之外单击时，它会保留。我如何让它以相反的方式工作？

编码为：

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

而HTML是：

<span class="invite_room_btn">
            <div class="messagepop pop">
            </div>
</span>

谢谢！

Answer 1

您的问题可以解释为“如何识别何时在弹出窗口外进行点击 window”？

按照建议 here，您可以区别对待，检查点击是否发生在弹出窗口 window 之外的任何地方（最终还有一些其他元素）

这可以通过以下方式实现：

HTML 代码可能类似于：

<div id="popup" class="popup"> 
    Content
    <div>DIV inside</div>
</div>
<button id="open">Open</button>

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

带有一些 CSS 样式的完整示例：http://jsfiddle.net/sLdmxda8/2/

Answer 2

我用下面的代码搞定了！

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

感谢您的帮助！

如何识别何时在弹出窗口外进行点击window？

How to identify when a click is made outside the popup window?

html

javascript

jquery

dropdownbox