Touch through an element in a browser (like pointer-events: none)

Question

The problem:

I've searched and searched, but I can't find information on how to get a touch event to trigger through an overlay element. I've solved the problem for mouse click events by using the following:

pointer-events: none;

That was simple enough, but it doesn't work on touch events. I know there are some mobile native things that can solve this, but this is purely for browsers--both mobile and non-mobile.

The project:

Here's my basic project, Croppy. I've got some rudimentary touch zoom and good dragging, but it's hampered by my crop div being on top of the canvas (this is visually necessary, unfortunately). There is an example included, if you wish to tinker with it directly. I'm trying to do it all without any external libraries as an exercise.

Any help or pointers would be greatly appreciated!

Answer 1

Perhaps this should've been obvious, but I found an answer. Only doing pointer-events: none does work, but only rarely, and I have to move my fingers around quickly to get it to trigger right. In order to make it work 100%, I added a touchstart event listener to the overlay element, like so:

overlay.addEventListener('touchstart', function(e){
  e.preventDefault();
});

This seems a bit silly, but maybe it has to do with how CSS and JavaScript are stepping on each other's toes these days. I don't know.

Interestingly, without e.preventDefault(), it still works, but not 100% of the time. I'm not sure that line is strictly required for this operation to work correctly.

Edit: This is in Android Chrome 31.0.1650.59 by the way.