Jquery Mobile Touch and release

Question

>我目前坚持使用 jquery 移动触摸和发布，在 jquery 移动中，我将如何在触摸事件上替换图像 src，然后在发布时将原始图像重新应用于 src。

Answer 1

使用touchstart和touchend事件。可以处理窗口对象上的事件，然后测试事件的目标是否为图像。如果是这样，请替换映像的 src。

var normalPic = "http://lorempixel.com/180/180/food/1/";
var touchPic = "http://lorempixel.com/180/180/food/2/"
$(document).on("pagecreate", "#page1", function(){
    $(window).on("touchstart mousedown",  function(e){
        var id = e.originalEvent.target.id;
        if (id && id == "theImage") {     
            $("#theImage").prop("src", touchPic);
        }
    });
    $(window).on("touchend mouseup dragend",  function(e){
        $("#theImage").prop("src", normalPic);
    });
});

演示

您还可以使用 jQM 的 vmousedown， vmouseup 事件 （http://api.jquerymobile.com/vmousedown/） 来抽象鼠标与触摸事件：

$(document).on("pagecreate", "#page1", function(){
    $("#theImage").on("vmousedown",  function(e){
        $(this).prop("src", touchPic);
    });
    $("#theImage").on("vmouseup vmousecancel vmouseout",  function(e){
        $(this).prop("src", normalPic);
    });
});

更新的演示