jquery focusout と click イベントの間の競合に対する解決策を共有する

主流の 検索 エンジンで検索する場合、コンテンツを入力すると、スマート プロンプトが頻繁にポップアップされます。入力ボックスは入力であり、スマート プロンプト領域は提案です。通常、次に 2 つの操作があります:

1. プロンプトを選択し、内容を入力にコピーし、提案を自動的に閉じます。

2. Web ページ上の他の場所をクリックして、提案を自動的に閉じます。 C 1 つ目は、click

イベント

を使用し、Suggest にマウスクリックイベントを追加し、処理の入力にクリックの内容を書き込んで、Suggest を閉じるために使用できます。単独でテストする場合は問題ありません。 2 番目の実装では、入力要素に focusout イベントまたは Blur イベントを追加し、入力がフォーカスを失ったときに提案を閉じることができます。単独でテストする場合は問題ありません。

しかし、まとめると問題が発生します。フォーカス喪失イベント（サジェストが閉じられる）にのみ応答し、コンテンツクリックイベントには応答しません（クリックされたサジェストコンテンツが取得されません）。

オンラインで検索すると、同様の問題がいくつか見つかりましたが、blur は focusout と同じであり、どちらも機能しません。

考えた後、クリックイベントのトリガー条件を突然思いつきました。ボタンをクリックすると、クリックイベントがトリガーされます。クリックには、マウスをクリックすることとマウスを放すことが含まれます。

jquery

のclickイベントはマウスを放した後にトリガーされます(実際、button要素とhref要素のclickイベントはこんな感じです) 考えてみると、先ほど発生した競合問題が分かります。このとき、入力がフォーカスを失うイベントがトリガーされ、マウスが放されます (コンピューターの応答速度はマウスのクリックとリリースの速度よりも速いです)。クリックは完了しますが、この時点ではマウスは選択プロンプトの上にあるため、候補内のクリック イベントをトリガーできません。

これを考えた後、マウスがクリックされたときにトリガーされるように、提案内の応答を変更して、mousedown イベントと focusout の両方が成功しました。イベントは正しく処理されました。

//input的丢失焦点事件  
$("#input_area").focusout(function(){  
    $("#suggest_div").hide();  
});  
  
//suggest区域的点击事件  
$("#suggest_div li").mousedown(function(){  
    $("#input_area").val($(this).text());  
    $("#suggest_div").hide();  
});

クリックをマウスダウンに置き換えれば全く問題ありません。言うのが恥ずかしいくらい簡単ですが、なかなか思いつかないこともあります。

さらに、インターネット上で他の方法も見つけました。その 1 つは、

$("#input_area").keypress(function() {  
    $("#suggest_div").slideDown();  
}).blur(function() {  
    $("#suggest_div").slideUp();  
});

です。この方法は、非表示の

animation

を使用して、サジェスト領域のクリック イベントをトリガーできるようにします。ただし、スライドはすべての状況に適しているわけではなく、関数の成功をアニメーションの非表示速度に基づいて判断することは適切ではありません。

別の方法は、入力と提案を div でラップし、イベントを div に直接追加することです。これはテストされていませんが、理論的には可能なはずです。

以上がjquery focusout と click イベントの間の競合に対する解決策を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。