1/* 2 ** touch-sensitive.js 3 ** Simulates mouse event for corresponding toach events. 4 */ 5 6jQuery(function ($) { 7 8 /* checking for existance of touch device */ 9 if ($.support.touch) { 10 11 /* *************************** Start of touch sensitive code ****************************** */ 12 var mouseProto = $.ui.mouse.prototype, 13 _mouseInit = mouseProto._mouseInit, 14 touchHandled; 15 16 /* Simulate a mouse event based on a corresponding touch event */ 17 function simulateMouseEvent(event, simulatedType) { 18 19 /* Ignore multi-touch events */ 20 if (event.originalEvent.touches.length > 1) { 21 return; 22 } 23 24 event.preventDefault(); 25 26 var touch = event.originalEvent.changedTouches[0], 27 simulatedEvent = document.createEvent('MouseEvents'); 28 29 /* Initialize the simulated mouse event using the touch event's coordinates */ 30 simulatedEvent.initMouseEvent( 31 simulatedType, /* type */ 32 true, /* bubbles */ 33 true, /* cancelable */ 34 window, /* view */ 35 1, /* detail */ 36 touch.screenX, /* screenX */ 37 touch.screenY, /* screenY */ 38 touch.clientX, /* clientX */ 39 touch.clientY, /* clientY */ 40 false, /* ctrlKey */ 41 false, /* altKey */ 42 false, /* shiftKey */ 43 false, /* metaKey */ 44 0, /* button */ 45 null /* relatedTarget */ 46 ); 47 48 /* Dispatch the simulated event to the target element */ 49 event.target.dispatchEvent(simulatedEvent); 50 } 51 52 /* Handle the jQuery UI widget's touchstart events */ 53 mouseProto._touchStart = function (event) { 54 55 var self = this; 56 57 /* Ignore the event if another widget is already being handled */ 58 if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) { 59 return; 60 } 61 62 /* Set the flag to prevent other widgets from inheriting the touch event */ 63 touchHandled = true; 64 65 /* Track movement to determine if interaction was a click */ 66 self._touchMoved = false; 67 68 /* Simulate the mouseover event */ 69 simulateMouseEvent(event, 'mouseover'); 70 71 /* Simulate the mousemove event */ 72 simulateMouseEvent(event, 'mousemove'); 73 74 /* Simulate the mousedown event */ 75 simulateMouseEvent(event, 'mousedown'); 76 }; 77 78 /* Handle the jQuery UI widget's touchmove events */ 79 mouseProto._touchMove = function (event) { 80 81 /* Ignore event if not handled */ 82 if (!touchHandled) { 83 return; 84 } 85 86 /* Interaction was not a click */ 87 this._touchMoved = true; 88 89 /* Simulate the mousemove event */ 90 simulateMouseEvent(event, 'mousemove'); 91 }; 92 93 /* Handle the jQuery UI widget's touchend events */ 94 mouseProto._touchEnd = function (event) { 95 96 /* Ignore event if not handled */ 97 if (!touchHandled) { 98 return; 99 } 100 101 /* Simulate the mouseup event */ 102 simulateMouseEvent(event, 'mouseup'); 103 104 /* Simulate the mouseout event */ 105 simulateMouseEvent(event, 'mouseout'); 106 107 /* If the touch interaction did not move, it should trigger a click */ 108 if (!this._touchMoved) { 109 110 /* Simulate the click event */ 111 simulateMouseEvent(event, 'click'); 112 } 113 114 /* Unset the flag to allow other widgets to inherit the touch event */ 115 touchHandled = false; 116 }; 117 118 /* Translating touch events to mouse events and passing them to the original mouse event handling methods.*/ 119 mouseProto._mouseInit = function () { 120 121 var self = this; 122 123 /* Delegate the touch handlers to the widget's element */ 124 self.element 125 .bind('touchstart', $.proxy(self, '_touchStart')) 126 .bind('touchmove', $.proxy(self, '_touchMove')) 127 .bind('touchend', $.proxy(self, '_touchEnd')); 128 129 /* Call the original $.ui.mouse init method */ 130 _mouseInit.call(self); 131 }; 132 } 133 /* *************************** End of touch sensitive code ****************************** */ 134});