Construí una aplicación web y, por un poco de pulido, quise agregar manejadores de mouse y mouseup para intercambiar imágenes (en este caso, para hacer que un botón se vea como si se presionara).

Mi código es algo como esto:

window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");});
    $("#button_img").mouseup(function(){$("#button_img").attr("src","button_off.png")});
}

Esto funciona perfectamente en el escritorio, pero en dispositivos móviles (probando en iOS Safari), los eventos de mouse y mouseup ocurren al mismo tiempo, por lo que efectivamente no sucede nada.

Intenté usar los eventos vmousedown y vmouseup en jQueryMobile, sin embargo este código:

//include jquerymobile.js and jquerymobile.css 
window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");});
    $("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")});
}

Me acaba de dar los errores que vmousedown y vmouseup no existen. Además, jQueryMobile anula el CSS que ya he escrito para la página.

Entonces, ¿hay una manera de hacer que vmousedown y vmouseup funcionen, y hacerlo sin el CSS de jQuery Mobile?