Question

I’m working on a mobile web gallery where users can drag slide images left and right and all works great with that.

The problem is that when I overlay a div with absolute positioning that has a button within it the touch event’s for the div underneath don’t seem to be firing. I’ve tried pointer-events:none; on the overlaying div but that doesn’t seem to work.

Is there away to disable touch-events through the overlaying div so the div on the bottom of the z-index receives them?

Answer 1

You could catch the touch event on the overlaying div and delegate it to the underlying div to simulate this

$('#myDiv').click(function(event){
event.preventDefault();
$('#myOtherDiv').trigger(event);
});

Something along those lines (either use .trigger or just .click on the underlying div)