クリックイベントは、JQuery-Select2ドロップダウンが開いているときにブロックされます。クリックイベントを発生させるために2回クリックする必要があります

Question

1ページに1つのドロップダウンと送信ボタンがあります。そのドロップダウンは、JQuery-select2バージョン3.5.3を使用して実装されます。

JQuery-Select2ドロップダウンが開いているときにクリックイベントがブロックされます。クリックイベントを発生させるには、送信ボタンを2回クリックする必要があります。

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

外の最初のクリックで開いているとのリリースフォーカスでピントを維持するドロップダウンを参照してください。落ちる。次に、通常通りに2回目のクリックでイベントワークをクリックします。

これは、この問題を解決するためにどのようにStackOverflow

に質問Mouse hover events are blockedに関連するものです？。検索で数時間を過ごした後

Answer 1

は、select2.jsのドロップマスクの自己破壊に以下のような「フォワーダをクリックして」ほとんど問題に

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

を解決して追加のサイトから Going from select2 box to another requires two clicks

をアイデアを得ました

詳しい編集内容は次のとおりです。

最初にドロップダウンマスク領域を作成してください（行番号：1557は私のjs内にあります）。これは以下のようになり、上記の2行を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(); 
     } 
    }); 
} 

これは何とか私の問題を解決しました。

これはドロップダウンとページの他の要素との間で美しく機能しますが、別のドロップダウンをクリックするとワンクリックでは機能しません。