Pointer: Add pointerover and pointerout, fix pointercancel, trigger pointerover and pointerout when hover is not supported, add missing properties and properly translate MSPointer pointerType integers to Pointer strings

Author: kborchers

external/pointer.js

@@ -2,10 +2,11 @@
 var POINTER_TYPE_UNAVAILABLE = "",
     POINTER_TYPE_TOUCH = "touch",
     POINTER_TYPE_PEN = "pen",
-    POINTER_TYPE_MOUSE = "mouse";
+    POINTER_TYPE_MOUSE = "mouse",
+    preventDuplicate = false;
 
 function processEvent( event, pointerType ) {
-    var propLength,
+    var propLength, touch,
         i = 0,
         orig = event,
         mouseProps = $.event.mouseHooks.props;
@@ -32,7 +33,14 @@ function processEvent( event, pointerType ) {
         event.pointerType = POINTER_TYPE_MOUSE;
         event.isPrimary = true;
     } else if ( orig.type.indexOf("touch") !== -1 ) {
-        event.pointerId = orig.pointerId;
+        touch = orig.originalEvent.changedTouches[ 0 ];
+        event.pageX = touch.pageX;
+        event.pageY = touch.pageY;
+        event.screenX = touch.screenX;
+        event.screenY = touch.screenY;
+        event.clientX = touch.clientX;
+        event.clientY = touch.clientY;
+        event.pointerId = touch.identifier;
         event.pointerType = POINTER_TYPE_TOUCH;
         event.button = 0;
         event.buttons = 1;
@@ -41,35 +49,42 @@ function processEvent( event, pointerType ) {
         event.isPrimary = true;
     } else if ( orig.type.indexOf("Pointer") !== -1 ) {
         event.pointerId = orig.originalEvent.pointerId;
-        event.pointerType = orig.originalEvent.pointerType || POINTER_TYPE_UNAVAILABLE;
+        event.pointerType = processMSPointerType( orig.originalEvent.pointerType );
         event.button = orig.originalEvent.button;
-        event.buttons = orig.originalEvent.buttons;
+        event.buttons = event.pointerType === "touch" ? 1 : orig.originalEvent.buttons;
         event.width = orig.originalEvent.width;
         event.height = orig.originalEvent.height;
         event.pressure = orig.originalEvent.pressure;
         event.tiltX = orig.originalEvent.tiltX;
         event.tiltY = orig.originalEvent.tiltY;
+        event.pageX = orig.originalEvent.pageX;
+        event.pageY = orig.originalEvent.pageY;
+        event.screenX = orig.originalEvent.screenX;
+        event.screenY = orig.originalEvent.screenY;
+        event.clientX = orig.originalEvent.clientX;
+        event.clientY = orig.originalEvent.clientY;
         event.isPrimary = orig.originalEvent.isPrimary;
     }
 
     return event;
 }
 
-function pointerEventHandler( event, type ) {
-    var touch;
-
-    if ( event.type.indexOf("touch") !== -1 ) {
-        touch = event.originalEvent.changedTouches[ 0 ];
-        event.pageX = touch.pageX;
-        event.pageY = touch.pageY;
-        event.screenX = touch.screenX;
-        event.screenY = touch.screenY;
-        event.clientX = touch.clientX;
-        event.clientY = touch.clientY;
-        event.pointerId = touch.identifier;
+function checkHoverSupport( event, toTrigger ) {
+    if ( event.type.indexOf("touch") !== -1 || event.originalEvent.pointerType === 2 ) {
+        $( event.target ).trigger( processEvent( event, toTrigger ) );
     }
+}
 
-    $( event.target ).trigger( processEvent( event, type ) );
+function processMSPointerType( type ) {
+    if ( type === 2 ) {
+        return POINTER_TYPE_TOUCH;
+    } else if ( type === 3 ) {
+        return POINTER_TYPE_PEN;
+    } else if ( type === 4 ) {
+        return POINTER_TYPE_MOUSE;
+    } else {
+        return POINTER_TYPE_UNAVAILABLE;
+    }
 }
 
 $.event.special.pointerdown = {
@@ -80,7 +95,17 @@ $.event.special.pointerdown = {
         $( this ).off( "mousedown touchstart MSPointerDown", $.event.special.pointerdown.handler );
     },
     handler: function( event ) {
-        pointerEventHandler( event, "pointerdown" );
+        if ( !preventDuplicate ) {
+            // Trigger pointerover for devices that don't support hover
+            checkHoverSupport( event, "pointerover" );
+            $( event.target ).trigger( processEvent( event, "pointerdown" ) );
+        }
+
+        if ( event.type.indexOf("Pointer") !== -1 ) {
+            preventDuplicate = true;
+        } else {
+            preventDuplicate = false;
+        }
     }
 };
 
@@ -92,7 +117,8 @@ $.event.special.pointerup = {
         $( this ).off( "mouseup touchend MSPointerUp", $.event.special.pointerup.handler );
     },
     handler: function( event ) {
-        pointerEventHandler( event, "pointerup" );
+        checkHoverSupport( event, "pointerout" );
+        $( event.target ).trigger( processEvent( event, "pointerup" ) );
     }
 };
 
@@ -104,19 +130,44 @@ $.event.special.pointermove = {
         $( this ).off( "mousemove touchmove MSPointerMove", $.event.special.pointermove.handler );
     },
     handler: function( event ) {
-        pointerEventHandler( event, "pointermove" );
+        $( event.target ).trigger( processEvent( event, "pointermove" ) );
     }
 };
 
 $.event.special.pointercancel = {
     setup: function() {
-        $( this ).on( "touchcancel MSPointerCancel", $.event.special.pointermove.handler );
+        $( this ).on( "touchcancel MSPointerCancel", $.event.special.pointercancel.handler );
+    },
+    teardown: function() {
+        $( this ).off( "touchcancel MSPointerCancel", $.event.special.pointercancel.handler );
+    },
+    handler: function( event ) {
+        $( event.target ).trigger( processEvent( event, "pointercancel" ) );
+        $( event.target ).trigger( processEvent( event, "pointerout" ) );
+    }
+};
+
+$.event.special.pointerover = {
+    setup: function() {
+        $( this ).on( "mouseover MSPointerOver", $.event.special.pointerover.handler );
+    },
+    teardown: function() {
+        $( this ).off( "mouseover MSPointerOver", $.event.special.pointerover.handler );
+    },
+    handler: function( event ) {
+        $( event.target ).trigger( processEvent( event, "pointerover" ) );
+    }
+};
+
+$.event.special.pointerout = {
+    setup: function() {
+        $( this ).on( "mouseout MSPointerOut", $.event.special.pointerout.handler );
     },
     teardown: function() {
-        $( this ).off( "touchcancel MSPointerCancel", $.event.special.pointermove.handler );
+        $( this ).off( "mouseout MSPointerOut", $.event.special.pointerout.handler );
     },
     handler: function( event ) {
-        pointerEventHandler( event, "pointercancel" );
+        $( event.target ).trigger( processEvent( event, "pointerout" ) );
     }
 };
 })( jQuery );