javascript - 防止模态中的元素用 jQuery 关闭模态？

Question

我现在有一团乱七八糟的js，一堆不同的文件(继承的)中有太多的东西，而我在最后一个文件上遇到了麻烦。

我有一个包含表单的模态，除了选择框之外，一切正常。一旦用户单击选择框，它就会触发关闭函数。我已经尝试了我能记得的一切，但我不记得我想要做的事情的正确术语，所以我无法用谷歌搜索它。

Here's a quick fiddle

代码:

<div class="modal">
<select>
    <option>Select an option</option>
    <option>1</option>
    <option>2</option>
</select>
</div>

还有 js:

$(document).click(function(){
    if(!$(event.target).is(".modal")){
        $(".modal").hide();
    };
});

这通常适用于我放入其中的任何内容，除了选择框。

更新:好的，所以我对这个问题完全错误，并在测试中做出了一些错误的假设。这与选择框无关，而是与 jQuery datepicker-ui 选择相关。所以这个问题是 Stackoverflow 上其他几个问题的重复，可以作为重复问题关闭。我发现的重复问题之一是:Implementing jQuery DatePicker in Bootstrap modal

Answer 1

event.target指的是事件起源的元素，因此当您单击 select 元素时，e.target 是 select 元素，然后 $(event.target).is(".modal") 测试将失败。

因此，解决方案是检查事件的目标是否位于可以使用 .closest() 的 .modal 元素内。如下

$(document).click(function(){
    if(!$(event.target).closest(".modal").length){
        $(".modal").hide();
    };
});

演示:Fiddle