dropdown menu with 'click' function requires double click on touch screens

I have a menu with some dropdowns which active on click. This works until I use a touch screen, which then needs to be double-clicked before the menu will drop down. Here's the Javascript code I've used to set this up.

var MenuItem_WithChild = document.querySelectorAll("#menu .menu-item-has-children");
for(i=0; i< MenuItem_WithChild.length; i++){
    MenuItem_WithChild[i].addEventListener("click", subMenuOpen);
    
    function subMenuOpen() {
        for (i = 0; i < MenuItem_WithChild.length; i++) {
            MenuItem_WithChild[i].classList.remove("active");
        }

        this.classList.add("active");
    }
}

I used the 'click' function in multiple other places across my site but this is the only one with the double click issue.

Any help would be greatly appreciated. Thanks.

Add "touchend" event for touch screens or remove hover effect from CSS. (You can create a onclick funtion, and call it in click event and touchend event)