HTML and CSS Reference
In-Depth Information
document.getElementById('touch-plane').addEventListener('touchstart',
function(e){
document.getElementById('touching').innerText = 'touching';
});
document.getElementById('touch-plane').addEventListener('touchend',
function(e){
document.getElementById('touching').innerText = 'not touching';
});
</script>
This code will fill the screen with black, with white text containing the current
coordinate of the user's finger and whether the user is touching the screen or
not. You can get the current coordinates by tapping into the touches list from
the event passed to the
touchmove
event listener. You can get the first touch
from the list, and use
clientX
and
clientY
to retrieve the X and Y coordinates,
like so:
e.touches[0].clientX, e.touches[0].clientY
As you can see, you can prevent the document from scrolling by calling
e.preventDefault()
.
The other two event listeners for touchstart and touch end will be called when
the user touches and lifts their finger off of the screen.
Figure 7-1.
Detecting touches and movement
