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

Question

我有一个带有 class 的输入框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`)
            // }
        }
    }


});

但是，即使我在带有 class 的输入框中单击，我也会use-keyboard-input收到控制台消息

console.log("pressing outside the box")

标签： javascriptjquery

Answer 1

尝试使用Event.stopPropagation()which 将阻止当前事件在捕获和冒泡阶段的进一步传播。

演示：

$('*').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>