Eu construí um webapp, e para um pouco de polimento, eu queria adicionar manipuladores mousedown e mouseup para trocar imagens (neste caso, para fazer um botão parecer que está sendo pressionado).

meu código é algo assim:

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")});
}

Isso funciona muito bem na área de trabalho, mas no celular (testando no iOS Safari), os eventos mousedown e mouseup acontecem ao mesmo tempo, então efetivamente nada acontece.

Eu tentei usar os eventos vmousedown e vmouseup em jQueryMobile, no entanto, 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")});
}

Apenas me deu os erros que não existem. Além disso, o jQueryMobile substitui o CSS que já escrevi para a página.

Então, existe uma maneira de fazer com que o vmousedown e o vmouseup funcionem sem o CSS do jQuery Mobile?