1

I would like the event not to be activated in the input.

My code html

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

my code js

function test() {
alert('holi')

}

Mark Colling
  • 173
  • 1
  • 9
  • Listen for the event in the child element and cancel it by `stopPropagation` – Xaqron Mar 03 '18 at 18:45
  • Possible duplicate of [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) – Nikola Mitic Mar 03 '18 at 18:54

1 Answers1

4

You can conditionally check for the input. If you would like to avoid more elements, you can check for a characteristic like class name. 

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>

Another way would be to attach a listener to the child element:

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>
Agney
  • 18,522
  • 7
  • 57
  • 75