Javascript 当JQuery-Select2下拉列表打开时，单击事件被阻止。需要单击两次才能触发单击事件

我有一个下拉列表和一个提交按钮在一个页面。这个下拉列表是使用JQuery-select2版本3.5.3实现的

当JQuery-Select2下拉列表打开时，单击事件被阻止。因此，需要单击两次submit按钮才能触发click事件

HTML

<select id="supId" style="width:300px">
  <option value=""></option>
  <option value="1">Supplier 1</option>
  <option value="2">Supplier 2</option>
  <option value="3">Supplier 3</option>
</select>
<br><br><br><br><br><br><br><br><br>
<input type="button" value="Submit" id="submitBtn" onclick="$('#dispDiv').html('Clicked');">
<br><br>
<div id="dispDiv"></div>

看到这里跑步了吗

下拉列表保持焦点处于打开状态，并在下拉列表外部的第一次单击中释放焦点。然后像往常一样，在第二次单击中单击事件工作

这与Stackoverflow中的问题有关

---

如何解决这个问题？

在花了几个小时的搜索之后，从网站上得到了一个想法

在

select2.js

中的放置掩码自毁中添加一个如下所示的“点击转发器”，几乎解决了这个问题

$(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
$(document.elementFromPoint(e.clientX,e.clientY)).trigger("focus");

详细编辑如下

首先找到创建下拉掩码区域（MyJS中的行号：1557）。如下所示，将上述两行添加到

self.close（）之后

这不知怎么解决了我的问题

这在下拉列表和页面上的其他元素之间工作得很好，但是单击另一个下拉列表并不是一次单击就可以完成的。
在花了几个小时的搜索后，从网站上得到了一个想法

在
select2.js
中的放置掩码自毁中添加一个如下所示的“点击转发器”，几乎解决了这个问题

$(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
$(document.elementFromPoint(e.clientX,e.clientY)).trigger("focus");

详细编辑如下

首先找到创建下拉掩码区域（MyJS中的行号：1557）。如下所示，将上述两行添加到
self.close（）之后

这不知怎么解决了我的问题

这在下拉菜单和页面上的其他元素之间工作得很好，但是单击另一个下拉菜单在单次单击中不起作用

// create the dropdown mask if doesn't already exist
mask = $("#select2-drop-mask");
if (mask.length === 0) {
    mask = $(document.createElement("div"));
    mask.attr("id","select2-drop-mask").attr("class","select2-drop-mask");
    mask.hide();
    mask.appendTo(this.body);
    mask.on("mousedown touchstart click", function (e) {
        // Prevent IE from generating a click event on the body
        reinsertElement(mask);

        var dropdown = $("#select2-drop"), self;
        if (dropdown.length > 0) {
            self=dropdown.data("select2");
            if (self.opts.selectOnBlur) {
                self.selectHighlighted({noFocus: true});
            }
            self.close();

            // The following two lines are newly added
            // Adding this to forward through the mask
            $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
            $(document.elementFromPoint(e.clientX,e.clientY)).trigger("focus");

            e.preventDefault();
            e.stopPropagation();
        }
    });
}