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

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>

另一种方法是将监听器附加到子元素:

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>