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

Question

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

The problem Is when I click on an element which is above another element then the click event is also triggered on below element.

I am having a custom popup which opens on center of page and having a button exactly below the button there is also a button on page with click event.

So on clicking the button on popup the event is also fired on button below the popup.

How to prevent this kind of events on Touch devices.

Same is the case with the drop-down when I select or click the option then the below button's click event get fired up.

enter image description here

Did you ever figure this one out? I'm having a similar problem.. — Anthony, Sep 18 '13 at 19:39
I was unable to find solutions for the element's click event's, so i had to change the positions of buttons and popup for that. and for image in the question earlier i was using Custom Dropdown(Made with Jquery and HTML) but to sort that out i had to use tag of HTML. — Shashank.gupta40, Dec 05 '13 at 10:21

score 0 · Answer 1 · answered Dec 08 '13 at 10:30

0

you should use event.stoppropagation():

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

That should solve your problem.

answered Dec 08 '13 at 10:30

Atheist

525
3
22

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

1 Answers1