/    /  Javascript  Pointer Events

Javascript  Pointer Events

 

javascript Pointer events are a modern way to handle input from a variety(different) of pointing devices, such as a mouse, a pen/stylus, a touchscreen, and so on.

 

Pointer event types:

 

  • pointerdown
  • pointerup
  • pointermove
  • pointerover
  • pointerout
  • pointerenter
  • pointerleave
  • pointercancel
  • gotpointercapture
  • lostpointercapture

 

EXAMPLE:


<!doctype html>
<body>
 <style>
  #area {
   border: 1px solid black;
   width: 90%;
   height: 180px;
   cursor: pointer;
   overflow: scroll;
   user-select: none;
  }
 </style>

 <div id="area">
 Multi-touch here
 </div>
 <script>
  document.onpointerdown = document.onpointerup = log;

  function log(event) {
   area.insertAdjacentHTML("beforeend", `
    <div>${event.type} isPrimary=${event.isPrimary} pointerId=${event.pointerId}</div>
   )
  area.scrollTop = 1e9;
  }
 </script>

</body>

 

OUTPUT:

 

Javascript Pointer Events