dispatch event listener problem after click

Question

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 ) ? & 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 => 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) > 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;
}

<aside class="sidenav">

          <nav>
              <ul>
                  <li><a href="https://dev.to/">Home</a></li>
               
                  <li><a href="">Cat </a>
                      <ul>
                          <li><a href="https://dev.to/" >Cat 1</a></li>
                          <li><a href="https://dev.to/" target="_blank">Cat 1 </a></li>
                      </ul>
                  </li>
            
             <li><a href="https://dev.to/">about</a></li>
             <li><a href="https://dev.to/">about</a></li>
             <li><a href="https://dev.to/">about</a></li>

              </ul>
          </nav>
      </aside>

Answer 1

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();