OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

dynamic vanilla event catching: what is wrong with this code

  • Thread starter Thread starter dulup
  • Start date Start date
D

dulup

Guest
Why does this code do not works?

in theory it seems to do instead... but no.


Code:
document.addEventListener("DOMContentLoaded", function(event) {
  let appendix_wrap = document.getElementById("wrap");
  let hafigli_liv2 = appendix_wrap.querySelectorAll('ul.ul-submenu');
  hafigli_liv2.forEach(ul_li_liv2 => {
    ul_li_liv2.addEventListener("click", (lk_liv2) => {
      const link_liv2 = lk_liv2.target.matches('ul.ul-submenu li.menu-item-has-children a');
      this.preventDefault(); //evita che cambi pagina
    });
  });
});

Code:
<!DOCTYPE html>
<html>

<head>
  <title>prova js</title>
</head>

<body>
  <h1>js menu flush</h1>
  <ul id="wrap">
    <li id="menu-item-658" class="menu-item-has-children ul-submenu-li">
      <a title="tre" href="#">tre</a>
      <ul class="submenu-submenu">
        <li id="menu-item-663" class="menu-item-has-children">
          <a title="due" href="#">due</a>
          <ul class="ul-submenu">
            <li id="menu-item-664" class="menu-item-664">
              <a title="uno" href="#">uno</a>
          </ul>
      </ul>
      </li>
  </ul>
</body>
<p class="menu-item-description">Le maniglie perfette</p>
</li>
</body>

</html>

The logic is that i click in A element inside some UL and LIs and ULs and LIs and it has to not open the link.

Please help

<p>Why does this code do not works?</p>
<p>in theory it seems to do instead... but no.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.addEventListener("DOMContentLoaded", function(event) {
let appendix_wrap = document.getElementById("wrap");
let hafigli_liv2 = appendix_wrap.querySelectorAll('ul.ul-submenu');
hafigli_liv2.forEach(ul_li_liv2 => {
ul_li_liv2.addEventListener("click", (lk_liv2) => {
const link_liv2 = lk_liv2.target.matches('ul.ul-submenu li.menu-item-has-children a');
this.preventDefault(); //evita che cambi pagina
});
});
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>

<head>
<title>prova js</title>
</head>

<body>
<h1>js menu flush</h1>
<ul id="wrap">
<li id="menu-item-658" class="menu-item-has-children ul-submenu-li">
<a title="tre" href="#">tre</a>
<ul class="submenu-submenu">
<li id="menu-item-663" class="menu-item-has-children">
<a title="due" href="#">due</a>
<ul class="ul-submenu">
<li id="menu-item-664" class="menu-item-664">
<a title="uno" href="#">uno</a>
</ul>
</ul>
</li>
</ul>
</body>
<p class="menu-item-description">Le maniglie perfette</p>
</li>
</body>

</html></code></pre>
</div>
</div>
</p>
<p>The logic is that i click in A element inside some UL and LIs and ULs and LIs and it has to not open the link.</p>
<p>Please help</p>
 
Top