Javascript Jquery.hasClass（）方法不适用于dom单击事件检查

我有一个使用键盘输入的输入框。我希望在所有单击事件中触发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在框外按将阻止当前事件在捕获和冒泡阶段的进一步传播

演示：

$'*'。单击函数事件{ 事件。停止传播； 如果$this.hasClass'use-keyboard-input'==false{ 控制台.日志`从盒子外按` 键盘隐藏=错误 $'。键盘隐藏。每个=>{ 键盘隐藏=真 } if keyboardHidden==false{//如果键盘未隐藏 console.log`关闭键盘` } } }; 容器

---

事件在DOM树上冒泡到父元素。正如@Pointy提到的，事件在DOM层次结构上冒泡。因此，单击输入框也会对其所有祖先元素触发单击事件。使用event.stopPropagation防止事件冒泡。