Added slight delay before application of hover/down classes on touch …

…devices, to prevent unintentional hover-ish behavior when the user intent is to scroll.
jquery-archive · Dec 30, 2011 · 171be28 · 171be28
1 parent bb2a578
commit 171be28
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/js/jquery.mobile.buttonMarkup.js b/js/jquery.mobile.buttonMarkup.js
@@ -128,6 +128,8 @@ function closestEnabledButton( element ) {
 }
 
 var attachEvents = function() {
+	var hoverDelay = 200,
+		hov, foc;
 	$( document ).bind( {
 		"vmousedown": function( event ) {
 			var btn = closestEnabledButton( event.target ),
@@ -136,7 +138,9 @@ var attachEvents = function() {
 			if ( btn ) {
 				$btn = $( btn );
 				theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-				$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
+				hov = setTimeout(function() {
+					$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
+				}, hoverDelay );
 			}
 		},
 		"vmousecancel vmouseup": function( event ) {
@@ -156,17 +160,21 @@ var attachEvents = function() {
 			if ( btn ) {
 				$btn = $( btn );
 				theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
-				$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
+				foc = setTimeout(function() {
+					$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
+				}, hoverDelay );
 			}
 		},
 		"vmouseout blur scrollstart": function( event ) {
 			var btn = closestEnabledButton( event.target ),
 				$btn, theme;
-
 			if ( btn ) {
 				$btn = $( btn );
 				theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
 				$btn.removeClass( "ui-btn-hover-" + theme  + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
+
+				hov && clearTimeout( hov );
+				foc && clearTimeout( foc );
 			}
 		}
 	});