dispatch event listener problem after click My code is working fine...
but I want to remove below those(1) lines of code from my example code(2) (JS Code). If I remove those code then a tag is not working. (a tag do not open link or href is not working).
Is it a good approach to done it by writing those code? ( if any problem will occur for ajax request for this ) ? &amp; Is there any way to work a tag by removing those line of code ? Please help me.
Wanna Remove Those Code(1)
 if (e.target.nextElementSibling == null) {

    if (e.target.getAttribute('target') != null) {
        window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
    } else {
        window.location.href = e.target.getAttribute('href');
    }

Example Code(2)


const lists = document.querySelectorAll('.sidenav nav ul ul')
lists.forEach(function (el) {
    el.className = 'sub-menu';
    el.style.height = 0 + "px";
})
document.querySelectorAll(".sidenav nav  ul li a ").forEach(el =&gt; el.addEventListener('click', function (e) {

    e.preventDefault();
    e.stopPropagation();


    if (e.target.nextElementSibling == null) {

        if (e.target.getAttribute('target') != null) {
            window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
        } else {
            window.location.href = e.target.getAttribute('href');
        }
    }

    let el = e.target.parentElement.children[1];
    let ul = e.target.parentElement.closest('ul');
    if (ul) {
        ul.querySelectorAll('ul').forEach(function (item) {
            item.style.height = 0 + 'px';
        })
    }

    if (typeof el == 'undefined') return;

    if (parseInt(getComputedStyle(el).height) &gt; 0) {
        el.style.height = 0 + "px";
    } else {
        el.style.height = el.scrollHeight + "px";
    }
    return false;

}));
*,*::after,*::before{
    box-sizing: border-box;
}
html,body{
    margin: 0;
    padding: 0;
}
nav{
    padding: 20px;
    height: 4rem;
    width: 250px;
}
nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
     display: flex;
     flex-direction: column;
}
nav ul li {
  
      background: tomato;
     width: 100%;

}
nav ul li a{
    display: block;
    padding: 10px;
    text-decoration: none;
   
}
nav ul ul {
  margin-left: 20px;
  height: 0;
    transition: all .2s ease-in ;
}

nav ul ul li {
      width: 100%;
    background: aqua;
}
&lt;aside class="sidenav"&gt;

          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="https://dev.to/"&gt;Home&lt;/a&gt;&lt;/li&gt;
               
                  &lt;li&gt;&lt;a href=""&gt;Cat &lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="https://dev.to/" &gt;Cat 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="https://dev.to/" target="_blank"&gt;Cat 1 &lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
            
             &lt;li&gt;&lt;a href="https://dev.to/"&gt;about&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="https://dev.to/"&gt;about&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="https://dev.to/"&gt;about&lt;/a&gt;&lt;/li&gt;

              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/aside&gt;
e.preventDefault();
e.stopPropagation();

if (e.target.nextElementSibling == null) {

    if (e.target.getAttribute('target') != null) {
        window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
    } else {
        window.location.href = e.target.getAttribute('href');
    }
}

Change that part to:
if (e.target.nextElementSibling == null) {
    return;
}

e.preventDefault();
e.stopPropagation();