Метод Jquery .hasClass () не работает при проверке события dom click

Question

У меня есть поле ввода с классом use-keyboard-input. Я хочу, чтобы событие DOM срабатывало во всех событиях щелчка, кроме тех случаев, когда в поле ввода щелкали

Я сделал:

$('*').click(function(event) {


    if ($(this).hasClass('use-keyboard-input') == false){
        console.log(`pressing outside the box`)

        keyboardHidden = false
        $('.keyboard--hidden').each(()=>{
            keyboardHidden = true          
        })


        if (keyboardHidden == false){     //If keyboard is not hidden
            // if (this !== $(".keyboard")) { 
                Keyboard.close();
                console.log(`Close the keyboard`)
            // }
        }
    }


});

Однако, даже когда я щелкаю внутри поля ввода с классом use-keyboard-input Получаю консольное сообщение

console.log("pressing outside the box")

Answer 1

Попробуйте с Event.stopPropagation(), что предотвратит дальнейшее распространение текущего события в захвате и пузыри фазы.

Демонстрация:

$('*').click(function(event) {

  event.stopPropagation();
  if ($(this).hasClass('use-keyboard-input') == false){
    console.log(`pressing outside the box`)

    keyboardHidden = false
    $('.keyboard--hidden').each(()=>{
      keyboardHidden = true          
    })


    if (keyboardHidden == false){     //If keyboard is not hidden
      console.log(`Close the keyboard`)
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Container
  <input class="use-keyboard-input"/>
</div>