MENU


Pointer Events

Extending the MouseEvent interface, the PointerEevent interface addresses events fired by pointing devices such as the pen/stylus and touch surfaces, in addition to the mouse.

Properties:
pointerId
width
height
pressure
tangentialPressure
tiltX
tiltY
twist
pointerType
isPrimary

Events:
pointerover
poinerenter
pointerdown
pointermove
pointerup
pointercancel
pointerout
pointerleave
gotpointercapture
lostpointercapture

Element extensions:
setPointerCapture()
releasePointerCapture()

The navigator.maxTouchPoints property is used to determine the maximum number of simultaneous touch points that are supported at any single point of time.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <script>
       function over_handler(event) { }
       function enter_handler(event) { }
       function down_handler(event) { }
       function move_handler(event) { }
       function up_handler(event) { }
       function cancel_handler(event) { }
       function out_handler(event) { }
       function leave_handler(event) { }
       function gotcapture_handler(event) { }
       function lostcapture_handler(event) { }
       function init() {
          var el=document.getElementById("target");      // Register pointer event handlers
          el.onpointerover = over_handler;
          el.onpointerenter = enter_handler;
          el.onpointerdown = down_handler;
          el.onpointermove = move_handler;
          el.onpointerup = up_handler;
          el.onpointercancel = cancel_handler;
          el.onpointerout = out_handler;
          el.onpointerleave = leave_handler;
          el.gotpointercapture = gotcapture_handler;
          el.lostpointercapture = lostcapture_handler;
      }
   </script></head>
   <body onload="init();">
      <div id="target"> Touch me ... </div>
   </body>
</html>
Device Button State MouseEvent.button MouseEvent.buttons
Neither buttons nor touch/pen contact changed since last event -1 --
Mouse moves with no button pressed; Pen moves while hovering with no buttons pressed -- 0
Left Mouse, Touch contact, Pen contact 0 1
Middle Mouse 1 4
Right Mouse, Pen barrel button 2 2
X1 (back) Mouse 3 8
X2 (forward) Mouse 4 16
Pen eraser button 5 32

The touch-action CSS property is used to specify whether the browser should apply its default (native) touch behavior (such as zooming or panning) to a region.


#target {
    touch-action: pan-x;
}