How to avoid clicking on the bottom html element when clicking on the html element above it on touch devices?

Question

I am making a cross-platform mobile site using html and jQuery for Android, windows and iPhone.

The problem is that when I click on an element that is above another element, the click event also fires below the element below.

I have a custom popup that opens in the center of the page and with a button just below the button there is a button on the page with the click event.

Thus, when a button is pressed in a pop-up window, an event is also triggered on the button below the pop-up window.

How to prevent such events on touch devices.

The same thing happens with the drop-down list when I select or select an option, after which the event lights up with the click of a button below.

Answer 1

you should use event.stoppropagation () :

$('your-element').on('click', function(e){ e.stopPropagation(); // other stuff here }) 

This should solve your problem.