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;
};
Done on a component by component basis. Client side api will be tricky, but will be addressed in 1.4Beta.
commendButton in JSP and JSF is complete with exception of the contentPane attribute (which will be replaced in 1.4Beta when contentStack client api is completed).