Jquery Mobile Touch 和发布答案

【问题标题】：Jquery Mobile Touch and releaseJquery Mobile Touch 和发布
【发布时间】：2014-04-02 21:47:09
【问题描述】：

我目前坚持使用 jquery mobile touch 和 release，在 jquery mobile 中，我将如何在触摸事件中替换图像 src，然后在发布时将原始图像重新应用到 src。

【问题讨论】：

【解决方案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);
    });
});

DEMO

您还可以使用 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);
    });
});

更新DEMO

【讨论】：