?](http#forms) will show how.

There are currently two widely used ways to point at things on a

screen: mice (including devices that act like mice, such as touchpads

and trackballs) and touchscreens. These produce different kinds of

events.

{{index touch, "mousedown event", "mouseup event", "click event"}}

The style of graphical browser that we use was designed with mouse

interfaces in mind, at a time where touchscreens were very rare. To

make the Web "work" on early touchscreen phones, browsers for those

devices pretended, to a certain extent, that touch events were mouse

events. If you tap your screen, you'll get `"mousedown"`, `"mouseup"`,

and `"click"` events.

But this illusion isn't very robust. A touchscreen works differently

from a mouse: it doesn't have multiple buttons, you can't track the

finger when it isn't on the screen (to simulate `"mousemove"`), and it

allows multiple fingers to be on the screen at the same time.

Mouse events only cover touch interaction in straightforward cases—if

you add a `"click"` handler to a button, touch users will still be

able to use it. But something like the resizeable bar in the last

example does not work on a touchscreen.

{{index "touchstart event", "touchmove event", "touchend event"}}

There are separate event types fired by touch interaction. When a

finger starts touching the screen, you get a `"touchstart"` event.

When it is moved while touching, `"touchmove"` events fire. And

finally, when it stops touching the screen, you'll see a `"touchend"`

event.

{{index "touches property", "clientX property", "clientY property", "pageX property", "pageY property"}}

Because many touchscreens can detect multiple fingers at the same

time, these events don't have a single set of coordinates associated

with them. Rather, their ((event object))s have a `touches` property,

which holds an ((array-like object)) of points, each of which has its

own `clientX`, `clientY`, `pageX`, and `pageY` properties.

You could do something like this to show red circles around every

touching finger.

```{lang: "text/html"}