如何防止事件在子元素中被激活？

Question

我希望不要在输入中激活该事件。

我的代码html

<header>
    <nav class="titlebar" ondblclick="test()">
       <input class="box" type="text">
       <hr> 
    </nav>
</header>

我的代码js

function test() {
alert('holi')

}

Answer 1

您可以有条件地检查输入。 如果要避免使用更多元素，可以检查诸如类名之类的特征。

 function test(e) { if(e.target instanceof HTMLInputElement && e.target.type == 'text') { console.log("INput clicked"); } else { console.log("somewhere else"); } } 

 <header> <nav class="titlebar" ondblclick="test(event)"> <input class="box" type="text"> <hr> </nav> </header> 

另一种方法是将侦听器附加到child元素：

 function test() { console.log("clicked container"); } function stop(event) { event.stopPropagation(); //Stops propagation to parent } 

 <header> <nav class="titlebar" ondblclick="test(event)"> <input class="box" type="text" ondblclick="stop(event)"> <hr> </nav> </header>