1

In my web UI, i would like to have totally different response to mouse and touch events in the same screen area. I see the solution to position a blank container (either div or SVG rect) over the area in order to capture only the touch events for the entire space, while mouse events would reach out to the specific objects underneath.

The question is: how do i make this container sensitive to touch events (as if it had CSS property pointer-events: visible;) but transparent for mouse event (as if it had CSS property pointer-events: none;)?

Unfortunately, the mentioned CSS property modifies the behavior together for mouse and touch. Thanks!

Angie
  • 1,475
  • 1
  • 10
  • 5
  • You could check in your event handler what type of event it is and either pass it on to the next handler if it's a mouse event. – Lars Kotthoff Aug 09 '14 at 17:01
  • Yes, that was my thought. But i can't find the method to pass the event to the next handler (provided that i don't know in advance which element would happen to be the next). Would you mind to give a code example? – Angie Aug 09 '14 at 17:26
  • Events are actually bubbled up automatically (see e.g. [this question](http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing)), so you would need to stop those that you're handling with [`.stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation). – Lars Kotthoff Aug 09 '14 at 17:30

0 Answers0