Stated adding second example
← Older revision
Revision as of 23:42, 15 February 2013
(One intermediate revision by one user not shown)
Line 14:
Line 14:
{{Concept_Page
{{Concept_Page
|Content===1. WHY POINTER EVENTS==
|Content===1. WHY POINTER EVENTS==
+
===1.1 UNIFIED MODEL FOR MULTIPLE INPUT TYPES===
===1.1 UNIFIED MODEL FOR MULTIPLE INPUT TYPES===
In the last few years, there has been an explosion of computing devices that use mechanisms other than a mouse for end user input. These input mechanisms include touch as on a smartphone or pen/stylus as on a slate. All of today’s web browsers support mouse events (mouseover, mousedown, mousemove, etc.) but many users aren’t using a mouse. Today’s user may be interacting with a web page using their fingers on a smartphone while riding public transit or using a pen on a slate/tablet while in a meeting. Pointer Events provides a unified model for all three of these input types without requiring web developers to write unique code for each. And Pointer Events is intended to be forward compatible covering future interaction paradigms.
In the last few years, there has been an explosion of computing devices that use mechanisms other than a mouse for end user input. These input mechanisms include touch as on a smartphone or pen/stylus as on a slate. All of today’s web browsers support mouse events (mouseover, mousedown, mousemove, etc.) but many users aren’t using a mouse. Today’s user may be interacting with a web page using their fingers on a smartphone while riding public transit or using a pen on a slate/tablet while in a meeting. Pointer Events provides a unified model for all three of these input types without requiring web developers to write unique code for each. And Pointer Events is intended to be forward compatible covering future interaction paradigms.
+
===1.2 ABILITY TO IDENTIFY DIFFERENT INPUT TYPES===
===1.2 ABILITY TO IDENTIFY DIFFERENT INPUT TYPES===
Most modern browsers such as the latest versions of Chrome, Firefox, Internet Explorer, Opera, and Safari all map touch or pen input to mouse events. But this makes it hard to know if a mouse event is an actual mouse event or was synthetically generated from a touch or pen input event. Pointer Events also includes attributes to identify which mouse or pen button(s) were pressed during the event.
Most modern browsers such as the latest versions of Chrome, Firefox, Internet Explorer, Opera, and Safari all map touch or pen input to mouse events. But this makes it hard to know if a mouse event is an actual mouse event or was synthetically generated from a touch or pen input event. Pointer Events also includes attributes to identify which mouse or pen button(s) were pressed during the event.
+
===1.3 ADDITIONAL METHODS AND ATTRIBUTES===
===1.3 ADDITIONAL METHODS AND ATTRIBUTES===
Finally, Pointer Events provides additional attributes such as touch contact geometry size, pressure, and pen tilt so that web developers can take advantage of these additional inputs in building experiences for end users. And if web developers want, they can write unique code for each input type.
Finally, Pointer Events provides additional attributes such as touch contact geometry size, pressure, and pen tilt so that web developers can take advantage of these additional inputs in building experiences for end users. And if web developers want, they can write unique code for each input type.
+
==2. BASIC POINTER EVENTS==
==2. BASIC POINTER EVENTS==
Pointer Events includes a number of basic events similar to mouse events:
Pointer Events includes a number of basic events similar to mouse events:
−
=== 2.1 DOWN AND UP (WITH EXAMPLE)===
+
+
===2.1 DOWN AND UP (WITH EXAMPLE)===
Pointer Events includes basic pointer down and pointer up events.
Pointer Events includes basic pointer down and pointer up events.
* pointerdown is triggered when a user clicks a mouse button or touches the screen with a finger or pen.
* pointerdown is triggered when a user clicks a mouse button or touches the screen with a finger or pen.
Line 84:
Line 89:
+
+
+
===2.2 MOVE (WITH EXAMPLE)===
+
Pointer Events also includes a basic move event. The pointermove event is triggered when a user moves their mouse, finger, or pen.
+
Many devices with touch screens have default pan and zoom behaviors such as zooming for a double tap. Web developers can disable these default behaviors with the touch-action CSS value of none as shown in the below example.
+
The below example shows how pointermove is similar to mousemove:
+
+
+
+
}}
}}
{{Examples_Section
{{Examples_Section