打開JQuery-Select2下拉列表時，單擊事件將被阻止。 需要點擊兩次才能觸發點擊事件

Question

我在一頁中有一個下拉菜單和一個提交按鈕。 該下拉列表是使用JQuery-select2版本3.5.3實現的

打開JQuery-Select2下拉列表時，單擊事件將被阻止。 因此，需要兩次單擊提交按鈕才能觸發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>

Java腳本

$("#supId").select2({
        placeholder: "Select Supplier",
        allowClear: true
    });

在這里查看運行示例

下拉菜單使焦點保持打開狀態，並在下拉菜單外的第一次單擊中釋放焦點。 然后，按常規在第二次單擊中單擊事件工作。

這與以下問題有關： 鼠標懸停事件在Stackoverflow中被阻止

如何解決這個問題呢？。

Answer 1

經過數小時的搜索，從該網站獲得了一個想法從select2框轉到另一個框需要單擊兩次

在select2.js的drop-mask的自毀中添加如下所示的“ click forwarder”幾乎可以解決問題

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

詳細編輯如下。

首先找到創建下拉蒙版區域（我的js中的行號：1557）。 就像下面這樣，在self.close();之后添加上面兩行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();
        }
    });
}

這以某種方式解決了我的問題。

在下拉菜單和頁面上的其他元素之間可以很好地工作，但是單擊另一個下拉菜單無法單按。