Question

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

实现的

点击事件在JQuery-Select2下拉列表打开时被阻止。因此，需要单击两次“提交”按钮才能触发点击事件。

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>

的Javascript

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

请参阅此处正在运行的example

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

这与Stackoverflow中的问题Mouse hover events are blocked有关

如何解决这个问题？。

Answer 1

在搜索中花了几个小时后，从网站Going from select2 box to another requires two clicks获得了一个想法

添加＆＃34;点击转发器＆＃34;就像下面select2.js中的掉落蒙版的自毁一样，几乎可以解决问题

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

详细编辑如下。

首先找到创建下拉掩码区域（我的js中的行号：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();
        }
    });
}

这以某种方式解决了我的问题。

这在下拉列表与页面上的其他元素之间可以很好地工作，但单击另一个下拉列表不会单击。

打开JQuery-Select2下拉列表时，将阻止单击事件。需要点击两次以触发点击事件

1 个答案: