Chromeでinputタグ上のクリックと他のタグのクリックを区別する実現方法

入力フィールドがフォーカスを失い、クリアボタンをクリックしていない場合に、resetメソッドを実行して入力スタイルをリセットします。クリアボタンをクリックした場合、clearメソッドを実行して入力内容をクリアします。

図に示されています

以下のコードで実現しようと思いました

$(".search-input").focusout(function () {
          if (document.activeElement.className !== 'close-t') {//close-tがクリアキークラス名
            $('.search-input').addClass('search-before');
            $('.close').css('display', 'none');
            document.getElementById('search').value = '';
          }
});

他の発見は、inputボックスがフォーカスを失った後、最初にフォーカスを取得するのはbodyタグであり、そのため、この方法は無効となりました。最終的には以下のコードを使用してこの機能を実現しました。

$("#search").focusout(function () {
  //フォーカスが失われる後、クリアボタンがクリックされたかどうかを判定し、そうであればリセットしない
  var tapCloseButton = false;
  $('.close-t').focus(function () {
    tapCloseButton = true;
  });
  setTimeout(function () {
    if (!tapCloseButton) {
      $('.search-input').addClass('search-before');
      $('.close').css('display', 'none');
      document.getElementById('search').value = '';
    }
  },10);
});

焦点判定のステップを遅延実行することで、この時点で焦点はbodyから実際にクリックされた要素に移動しています。その後、焦点を再判定し、クリアキーかどうかを確認します。

以上のこのChromeでinput上のタグか他のタグをクリックした場合の判定方法が、編集者が皆さんに提供する全ての内容です。皆さんに参考になれば幸いですし、呐喊チュートリアルを多くのサポートをお願いします。