HTML and CSS Reference
In-Depth Information
When you click on the canvas element, you'll see a message displaying the current mouse position using
the
mouse.x
and
mouse.y
properties.
Touch Events
Because touch screen devices are gaining in popularity, it's a good idea to see how to use them with
JavaScript. Touch events are similar to mouse events, but have a few key differences. A touch point can
be thought of like a mouse cursor; however, a mouse cursor will always stay on the screen, whereas a
finger will press, move, and release from the device, so there will be times when no cursor is available.
When querying the touch position, you must take this into consideration. Secondly, there is no touch event
equivalent to
mouseover
—there is either a touch or there isn't, there is no finger hovering. Finally, multiple
touches can occur at the same time. Each touch is stored in an array on the touch event, but for these
examples we just use the first one.
Here's the touch events we use to interact with our animations:
touchstart
touchend
touchmove
These are demonstrated in example
05-touch-events.html
, so if you want to see this in action then
make sure you are on a device or emulator that can support touch events:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Touch Events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas');
function onTouchEvent (event) {
console.log(event.type);
}
canvas.addEventListener('touchstart', onTouchEvent, false);
canvas.addEventListener('touchend', onTouchEvent, false);
canvas.addEventListener('touchmove', onTouchEvent, false);
};
</script>
</body>
</html>
This code does the same thing as the mouse events example (
03-mouse-events.html
): When a touch
event is detected on the canvas element, it prints out the type to the debugging console.
