javascript - 单击弹出窗口外的选择框关闭弹出窗口

Question

我有一个弹出窗口，里面有一个选择框，其中的选项位于弹出窗口之外。所以，要关闭我的弹出窗口，我需要在外面单击，问题是当我从外面的选择框中选择一个选项时，它也会关闭弹出窗口:/

这是我的弹出窗口:

    <div id="form-modal" style="display:none" >

    <div id="form-modal-meeting" class="actions_" >
      <div class="action_popup">
          <div class="date-label" ><%= l(:priority) %></div>
            <select class="list_cf" id="issue_custom_field_values_27" name="issue[custom_field_values][27]"><option value="">&nbsp;</option><option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
</select>
          </div>
      </div>
    </div>

这是我关闭的 jquery 函数:

var mouse_is_inside = false;

  $(document).ready(function()
  {
    $('.action_popup').hover(function(){
      mouse_is_inside=true;
//          introJs().exit();
    }, function(){
      mouse_is_inside=false;
    });

    $("body").mouseup(function(){
      if(! mouse_is_inside) {
        if ($('#form-modal-watcher').css('display') == 'block') {
          mouse_is_inside=true;
        }
        else {
          $('#form-modal').fadeOut();
        }
      }
    });

      $('#ui-datepicker-div').hover(function(){
        mouse_is_inside=true;
      }, function(){
        mouse_is_inside=false;
    });


    $( ".add_watcher_btn" ).click(function() {
      mouse_is_inside=true;
    });


  });

Answer 1

你最好检查event.target元素，如果这是模态元素的后代，则为 jQuery::closest方法。

$("body").mouseup(function(event){
  if(isInside(event) === false) {
    $('#form-modal').fadeOut();
  }
});

function isInside (event) {
  return $(event.target).closest('#form-modal').length !== 0;
}

演示:https://jsfiddle.net/4mjg2uwb/