HTML Elements

Page 11

Touch Events

Introduction Touch & Mouse Events Touch or Mouse Start Touch or Mouse Move Touch or Mouse End Touch or Mouse Cancel Summary

Introduction

This helpful page demonstrates how to add the whole range of touch events, or selective mouse events, depending on the viewing device.

Topic

ontouchcancel: Happens if a touch event is interupted.
ontouchmove: Drag a finger across the screen.
ontouchstart: Place a finger on the screen.
ontouchend: End a touch event by lifing a finger.

Touch & Mouse Events

Move over, tap and exit the rainbow colored image. Events should activate with both mobile and desktop devices.

Mouse or Touch Tap, Move...

$Spectrum of Colors$

Touch & Mouse Event: JavaScript

Load IDs of the image and output elements.

var im = null;
var output = null;

/**
* When the page body, or
* image loads, then call 
* loadExample().
* Initialize listeners
* and variables.
* 
* @param imP: Image ID
* @param outputP: ID of HTML 
* element to display output.
*/
function loadExample(imP, outputP){
im = imP;
output = outputP;
addTouchMove();
addTouchStart();
addTouchEnd();
addTouchCancel();
}

Touch or Mouse Move

React when the mouse, finger or stylus move.

/**
* Add movement of a mouse 
* finger, or stylus.

* If ontouchstart is defined
* then we're viewing with a mobile
* device.
* Otherwise we're viewing with
* a desktop.
*/
function addTouchMove(){
	
if ("ontouchstart" in window){
		
im.addEventListener
(
'touchmove',    
touchListenerMove,
false   
);    
} 
		 
else {
im.addEventListener
(
'mousemove', 
listenerMove, 
false
);  
}  
}

/**
* @param ev: Event Object
* Move a finger; swipe.
*/
function touchListenerMove(ev){
ev.preventDefault();
output.innerHTML = "Touch Move.";
}

/**
* @param ev: Event Object
* Move the mouse.
*/
function listenerMove(ev){
output.innerHTML = "Mouse Move.";
}

Touch or Mouse Start

React when the mouse, finger or stylus start moving, or tap.

/**
* Add starting a mouse 
* or touch movement.

* If ontouchstart is defined
* then we're viewing with a mobile
* device.
* Otherwise we're viewing with
* a desktop.
*/
function addTouchStart(){
	
if ("ontouchstart" in window){
		
im.addEventListener
(
'touchstart',    
touchListenerStart,
false   
);    
} 
		 
else {
im.addEventListener
(
'mousedown', 
listenerStart, 
false
);  
}  
}

Touch or Mouse End

React when the mouse, finger or stylus stop moving, or lift up.

/**
* Add ending of a mouse 
* or touch movement.

* If ontouchstart is defined
* then we're viewing with a mobile
* device.
* Otherwise we're viewing with
* a desktop.
*/
function addTouchEnd(){
	
if ("ontouchstart" in window){
		
im.addEventListener
(
'touchend',    
touchListenerEnd,
false   
);    
} 
		 
else {
im.addEventListener
(
'mouseup', 
listenerEnd, 
false
);  
}  
}

/**
* @param ev: Event Object
* Move a finger; lift up.
*/
function touchListenerEnd(ev){
ev.preventDefault();
output.innerHTML = "Touch End.";
}

/**
* @param ev: Event Object
* End a mouse movement.
*/
function listenerEnd(ev){
output.innerHTML = "Mouse End.";

Touch or Mouse Cancel

React when the mouse, finger or stylus leave the active area.

/**
* Add cancelation of a mouse 
* or touch movement.

* If ontouchstart is defined
* then we're viewing with a mobile
* device.
* Otherwise we're viewing with
* a desktop.
*/
function addTouchCancel(){
	
if ("ontouchstart" in window){
		
im.addEventListener
(
'touchcancel',    
touchListenerCancel,
false   
);    
} 
		 
else {
im.addEventListener
(
'mouseout', 
listenerCancel, 
false
);
 
}  
} 

/**
* @param ev: Event Object
* Move a finger out of the
* image element.
*/
function touchListenerCancel(ev){
ev.preventDefault();
output.innerHTML = "Touch Cancel.";
}

/**
* @param ev: Event Object
* Cancel a mouse movement.
*/
function listenerCancel(ev){
output.innerHTML = "Mouse Cancel.";
}
}