Tomi Kajala
Programmer
Web designer

Fri 7/15/22 4:58 AM | Tomi

Javascript Mouse vs. Touch Events

Mouse events

To send an event when mouse pointer goes over an element or leaves the element:

<div onmouseover='handler(event)'>
<div onmouseleave='handler(event)'>

Touch Events

The above events often work on touch screens, too. But on a touch screen, the user has to tap outside of the element to trigger the onmouseleave event.

To trigger an event on touch screen when the user touches the element and also when the user stops touching the screen:

<div ontouchstart='handler(event)'>
<div ontouchend='handler(event)'>

Short test functions for testing touch events:

function handler(e)
{
if (e.type == 'touchstart') e.target.style.color = "white";
if (e.type == 'touchend') e.target.style.color = "";
e.preventDefault();
}
Click anywhere to close