Why does a pointer-event:none div still have itself as a touch target?

I have a game. The canvas div is below.

On top of that canvas div (so you can see the canvas div below) are little semi transparent divs with the game pads on it.

I put my touch events on the one canvas div below, rather than each of the 4 little pad-divs.

I thought I would make the pad divs invisible to the touch event by setting the pointer-event' to none`, eg:

$("#padDiv").css("pointer-event", "none");

However, in debugging I see the target of the touch event is padDiv rather than the canvas div as I had hoped it would be.

How can I overcome this and make sure the target of the touch event is the canvas div (ie how can I hide the 4 game pad divs to the touch events)?

Should I be putting touch events on each of the padDivs instead?

Is there problems with putting touch events on loads of smaller divs? (When I did, I appeared to be getting some "fake" touch events about 10 minutes into the game. I was trying to put the touch events onto the one canvas div instead to see if that resolved my problem.)

You need to sign in to view this answers