Subscribed unsubscribe Subscribe Subscribe

サジェスト機能実装時におけるfocusoutイベントとclickイベントの両立

最近、業務でサジェスト機能を実装する機会がありまして、
その際に少しハマった部分がありました。
それは、以下の2つを両立することです。
・サジェストを選択するとフリーワード入力欄に選択した文字列が設定される
・フリーワード入力欄からフォーカスを外した時にサジェストを消す

focusoutイベントの方がclickイベントよりも処理の優先順位が高いために
サジェストを選択しても、focusout時にサジェストを消す処理が先に走り、
clickイベントの際に選択したものをフリーワードの入力欄に設定するという処理が走らない事象が発生しました。

解決策

  • :hoverを使用する
$('.inputClassName').on('focusout', function(e) {
  // サジェスト選択時の場合
  if ($('.suggestClassName' + ':hover').length > 0) {
    return;
  }
  // サジェストを消す
  $('.suggestClassName').empty();
}); 

普通に考えたら、サジェストにマウスオーバーしている場合はfocusoutイベントハンドラーの処理をさせないようにすれば、いいですね。

なお、擬似クラス「:hover」については以下を参照
CSS :hover Selector

The :hover selector is used to select elements when you mouse over them.

Tip: The :hover selector can be used on all elements, not only on links.

Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

また、「fousout click」でググったらstack overflowにも同様の起票があったので、コメントしておきました。

javascript - jQuery .focusout / .click conflict - Stack Overflow