I have a two-step list:

<ul> <li id="l1-1"> 1 Уровень <ul> <li id="l2-1"> 2 Уровень </li> <li id="l2-2"> 2 Уровень </li> </ul> </li> </ul>

For the element with the identifier "l1-1", set the onclick event to hide all the child elements inside it. Also set the onclick event for "# l2-1" and "# l2-2", so that when pressed, the content of the element is displayed in the console.

 document.querySelector("l1-1").addEventListener("click", hideElements); document.querySelector("l2-1").addEventListener("click", printInConsole); document.querySelector("l2-2").addEventListener("click", printInConsole);

But when you click on the element "# l2-1" and "l2-2" they disappeared, the event for "# l1-1" was triggered. I tried to circumvent this:

 if(event.srcElement == this) ...

But then the events for "# l2-1" and "# l2-2" do not work at all.

Tell me how to implement for each of the elements its own event so that other elements do not respond to it.

  • provide a more complete code. - UModeL

1 answer 1

I figured it out! if you add processing:

 if(event.srcElement == this) ...

Inside the event, and instead of onclick use the onmousedown event, everything works!

  • Believe that because of this you will have more problems and questions. - UModeL Nov.