improved tap event and added a quick event logger page so we can get these neglected events in order.

scottjehl · scottjehl · commit 977e075ece5d · 2011-01-23T19:34:17.000-05:00
diff --git a/js/jquery.mobile.event.js b/js/jquery.mobile.event.js
@@ -63,21 +63,37 @@ $.event.special.tap = {
 			$this = $( thisObject );
 		
 		$this
-			.bind( touchStartEvent, function( event ) {
-				if ( event.which && event.which !== 1 ) {
-					return;
+			.bind( "mousedown touchstart", function( event ) {
+				if ( event.which && event.which !== 1 ||
+					//check if event fired once already by a device that fires both mousedown and touchstart (while supporting both events)
+					$this.data( "prevEvent") && $this.data( "prevEvent") !== event.type ) {
+					return false;
 				}
 				
+				//save event type so only this type is let through for a temp duration, 
+				//allowing quick repetitive taps but not duplicative events 
+				$this.data( "prevEvent", event.type );
+				setTimeout(function(){
+					$this.removeData( "prevEvent" );
+				}, 800);
+				
 				var moved = false,
 					touching = true,
 					origTarget = event.target,
-					origPos = [ event.pageX, event.pageY ],
+					origEvent = event.originalEvent,
+					origPos = event.type == "touchstart" ? [origEvent.touches[0].pageX, origEvent.touches[0].pageY] : [ event.pageX, event.pageY ],
 					originalType,
 					timer;
+					
 				
-				function moveHandler() {
-					if ((Math.abs(origPos[0] - event.pageX) > 10) ||
-					    (Math.abs(origPos[1] - event.pageY) > 10)) {
+				function moveHandler( event ) {
+					if( event.type == "scroll" ){
+						moved = true;
+						return;
+					}
+					var newPageXY = event.type == "touchmove" ? event.originalEvent.touches[0] : event;
+					if ((Math.abs(origPos[0] - newPageXY.pageX) > 10) ||
+					    (Math.abs(origPos[1] - newPageXY.pageY) > 10)) {
 					    moved = true;
 					}
 				}
@@ -91,17 +107,21 @@ $.event.special.tap = {
 					}
 				}, 750 );
 				
+				//scroll now cancels tap
+				$(window).one("scroll", moveHandler);
+				
 				$this
-					.one( touchMoveEvent, moveHandler)
-					.one( touchStopEvent, function( event ) {
-						$this.unbind( touchMoveEvent, moveHandler );
+					.bind( "mousemove touchmove", moveHandler )
+					.one( "mouseup touchend", function( event ) {
+						$this.unbind( "mousemove touchmove", moveHandler );
+						$(window).unbind("scroll", moveHandler);
 						clearTimeout( timer );
 						touching = false;
 						
 						/* ONLY trigger a 'tap' event if the start target is
 						 * the same as the stop target.
 						 */
-						if ( !moved && (origTarget == event.target)) {
+						if ( !moved && ( origTarget == event.target ) ) {
 							originalType = event.type;
 							event.type = "tap";
 							$.event.handle.call( thisObject, event );
diff --git a/tests/functional/eventlogger.html b/tests/functional/eventlogger.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<title>jQuery Mobile: Event Logger</title>
+	<link rel="stylesheet"  href="../../themes/default/" />
+	<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+	<script type="text/javascript" src="../../js/jquery.js"></script>
+	<script type="text/javascript" src="../../js/"></script>
+	
+	<script>
+	$( document )
+		.bind("tap taphold swipe swipeleft swiperight scrollstart scrollstop orientationchange",function( e ){
+			$("#log")
+				.prepend("<li>"+ e.type +" event; target: "+ e.target.nodeName +"</li>")
+				.listview("refresh");
+		
+		});
+	</script>
+</head> 
+<body> 
+<div data-role="page" data-theme="b" id="jqm-home">
+	<div data-role="header">
+		<h1>Event Logger</h1>
+	</div>
+	
+	<div data-role="content">
+		<p>Touch events on this page will log out below, prepending to the top as they arrive.</p>
+		
+		<ul data-role="listview" id="log">
+			
+		</ul>
+
+	</div>
+</div>
+</body>
+</html>
