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

Question

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

我的代码html

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

我的代码js

function test() {
alert('holi')

}

Answer 1

您可以有条件地检查输入。 如果您想避免使用更多元素，可以检查类名称等特征。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

function test() {
  console.log("clicked container");
}

function stop(event) {
  event.stopPropagation();  //Stops propagation to parent
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;