javascript - Jquery .hasClass() 方法不适用于 dom 单击事件检查

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("在框外按下")

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>