Handle touch and mouse events with ease

Until now, we have always tried to provide both touch and mouse events for users on a mobile device and on PC or television screens. With D3, we treated a touch event exactly as a mouse click event but only with a different interaction radius. However, it can easily happen that a user has both touch (or multi-touch) and a mouse as input devices. In this section, we solve caveats for developers when providing both input types for the user.

Mouse and touch events

Why could we use a mouse click event to also detect finger touches on a touch screen? To answer this question, we will take a look at the execution chains of events on a target DOM element mouse and go into touch-enabled device. We combine them into one execution chain for touching a target element on a touch device with the finger. Here is the list of events that will be propagated:

• touchstart: The fingertip touches the screen
• touchmove: The fingertip moves on the screen
• touchend: The fingertip...