One important thing that jquery mobile does is intelligently detect whether the click is a scrolling event or not. If it is, a timeout is used to prevent attaching a button depressed state when scrolling:
$( document ).bind( {
"vmousedown vmousecancel vmouseup vmouseover vmouseout focus blur scrollstart": function( event ) {
var theme,
$btn = $( closestEnabledButton( event.target ) ),
isTouchEvent = event.originalEvent && /^touch/.test( event.originalEvent.type ),
evt = event.type;
if ( $btn.length ) {
theme = $btn.attr( "data-" + $.mobile.ns + "theme" );
if ( evt === "vmousedown" ) {
if ( isTouchEvent ) {
// Use a short delay to determine if the user is scrolling before highlighting
hov = setTimeout( function()
{
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
}
, hoverDelay );
} else
{
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-down-" + theme );
}
} else if ( evt === "vmousecancel" || evt === "vmouseup" )
{
$btn.removeClass( "ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
}
else if ( evt === "vmouseover" || evt === "focus" ) {
if ( isTouchEvent ) {
// Use a short delay to determine if the user is scrolling before highlighting
foc = setTimeout( function()
{
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
}
, hoverDelay );
} else
{
$btn.removeClass( "ui-btn-up-" + theme ).addClass( "ui-btn-hover-" + theme );
}
} else if ( evt === "vmouseout" || evt === "blur" || evt === "scrollstart" ) {
$btn.removeClass( "ui-btn-hover-" + theme + " ui-btn-down-" + theme ).addClass( "ui-btn-up-" + theme );
if ( hov )
{
clearTimeout( hov );
}
if ( foc )
{
clearTimeout( foc );
}
}
}
},
"focusin focus": function( event )
{
$( closestEnabledButton( event.target ) ).addClass( $.mobile.focusClass );
}
,
"focusout blur": function( event )
{
$( closestEnabledButton( event.target ) ).removeClass( $.mobile.focusClass );
}
});
attachEvents = null;
};
Clickable regions will have the following states:
unpressed: ui-btn-up-a
pressed: ui-btn-down-a
****
<mobi:commandButton>
<mobi:accordion>
<mobi:tabSet>
<mobi:flipSwitch>
<mobi:menuButton>