Implementation Method to Determine Whether the Clicked Tag on the Input or Other Tags in Chrome

The desired function: when the input box loses focus and the click is not the clear button, execute the reset method to reset the input style. When the clear button is clicked, execute the clear method to clear the input content.

As shown in the figure

I wanted to implement it through the following code

$(".search-input").focusout(function () {
          if (document.activeElement.className !== 'close-t') {//close-t is the class name of the clear key
            $('.search-input').addClass('search-before');
            $('.close').css('display', 'none');
            document.getElementById('search').value = '';
          }
});

Findings other than the fact that when the input box loses focus, the first to obtain focus is the body tag, and because of this, the method fails. Finally, the following code is used to implement this function

$("#search").focusout(function () {
  //Determine whether the click after losing focus is the clear button, if it is, then do not reset
  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);
});

The focus judgment step is delayed to execute, so at this time, the focus has been moved from the body to the actual clicked element. At this time, focus judgment is made again to see if it is the clear key.

This article, which is the implementation method of determining whether the click is on the label of the input or other labels under Chrome, is all the content that the editor shares with everyone. It is hoped that this can provide a reference for everyone, and everyone is also expected to support the Yelling Tutorial more.