How to fix click event not working in mobile phones

Today, I am going to sharing to you how to fix the click event that doesn’t work in mobile browsers or specifically in iPhone. I encountered this problem when I was trying to test the responsive menu of a website I created in my IPhone.

In order to fix that problem we are going to delegate the click event to the parent element and if one if it’s child was click then let’s put are code there.

<div class="parent">
    <div class="child">I am the target element</div>
</div>

JavaScript event delegation code

const parent = document.querySelector(".parent");
parent.addEventListener("click", function(e) {
     const child = e.target.matches(".child, .child *");
     if (child) { // If child is click
     // Your code here
}});

Buy me a coffee https://paypal.me/deoviray

Thank you for reading.

visit MDN to learn more about this bug.