html5的移动端jq怎么实现触摸事件

触摸时间用tap函数。

代码如下：

<p>点击隐藏</p>

$("p").tap(function(){

$(this).hide()

})

这个你在手机端，必须要学会touch事件。

下面有段代码，你可以参考下，通过判断touch事件的位置来达到您需要的效果

function imgreset(){

$(this).css3Animate({

width: imgoldw+"px",

//x:0,

//y:0,

time: "0ms",

callback: function () {

pagex1_s=nullpagey1_s=nullpagex2_s=nullpagey2_s=nullpagex1_e=nullpagey1_e=null

pagex2_e=nullpagey2_e=nullpagexm1_s=nullpageym1_s=nullpagexm1_e=nullpageym1_e=null

dm=0dn=0

imgneww=imgoldw

}

                 })

}

var imgoldw=320//获取图片寛度

var imglength=$(".imgbox").length//获取图片个数

var demos = document.getElementById("container"),

        spirit, startScale, startRotation

var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0

var body_w=$("body").width()

var body_h=$("body").height()

var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e

    function touchStart(e) {

//e.stopPropagation()

        e.preventDefault()

if(e.touches.length == 1){

ismove=true

 var touch1 = e.touches[0]

            pagexm1_s = touch1.pageX

            pageym1_s = touch1.pageY

}

        if (e.touches.length == 2){

var touch1 = e.touches[0]

            pagex1_s = touch1.pageX

            pagey1_s = touch1.pageY

var touch2 = e.touches[1]

pagex2_s = touch2.pageX

pagey2_s = touch2.pageY

left = Math.min(pagex1_s, pagex2_s),

top = Math.min(pagey1_s, pagey2_s),

width = Math.abs(pagex1_s - pagex2_s),

height = Math.abs(pagey1_s - pagey2_s)

}

       

    }

function touchMove(e){

//e.stopPropagation()

e.preventDefault()

if (ismove&&e.touches.length == 1){

//单点触摸

var touch1 = e.touches[0],

pagexm1_e = touch1.pageX,

pageym1_e = touch1.pageY,

//移动了多少

dx=pagexm1_e-pagexm1_s,

dy=pageym1_e-pageym1_s

//是多少

dm=dx+dm

dn=dy+dn

if(imgneww==imgoldw){

$(this).css3Animate({

x:dm,

//y:dn,

time: "0ms",

callback: function () {

}

                 })

//如果图未放大，则执行翻页

}else{

//如果图片已经被放大，则可以拖动

$(this).css3Animate({

x:dm,

y:dn,

time: "0ms",

callback: function () {

//记录新位置

}

                 })

}

pagexm1_s=pagexm1_e,pageym1_s=pageym1_e

}

if (e.touches.length == 2){

//多点触摸

var touch1 = e.touches[0]

            pagex1_e = touch1.pageX

            pagey1_e = touch1.pageY

        var touch2 = e.touches[1]

            pagex2_e = touch2.pageX

            pagey2_e = touch2.pageY

//计算两点开始距离 old

var oldx=Math.abs(pagex1_s-pagex2_s),

oldy=Math.abs(pagey1_s-pagey2_s),

//计算两点开始距离 new

newx=Math.abs(pagex1_e-pagex2_e),

newy=Math.abs(pagey1_e-pagey2_e)

if(oldx>newx&&oldy>newy){

var imgw=$(this).width()//获取图片寛度

resizex=oldx-newx//缩小多少

var resizey=oldy-newy//缩小多少

if(imgw>imgoldw){

$(this).css3Animate({

width: imgneww-resizex+"px",

x:dm,

y:dn,

time: "0ms",

callback: function () {

}

                    })

imgneww=imgneww-resizex

}

}else{

var imgw=$(this).width()//获取图片寛度

var resizex=Math.abs(oldx-newx)

var resizey=Math.abs(oldy-newy)//缩小多少

if(imgw<640){

$(this).css3Animate({

width: imgneww+resizex+"px",

x:dm,

y:dn,

time: "0ms",

callback: function () {

}

                    })

imgneww=imgneww+resizex

}

}  

}

 

pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e

}

function touchEnd(e) {

e.preventDefault()

var imglength=$(".imgbox").length

var id=parseInt($(this).attr("id").substr(9))

if(ismove&&imgneww==imgoldw&&dm<0&&Math.abs(dm)>body_w/2&&id!=imglength-1){

$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip')

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0

}

})

}else if(ismove&&imgneww==imgoldw&&dm>0&&Math.abs(dm)>body_w/2&&id!=0){

$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip')

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0

}

})

}else{

if(ismove&&imgneww==imgoldw){

$(this).css3Animate({

x:0,

time: "0ms",

callback: function () {

dm=0

}

})

}

}

       ismove=false

    }

function gestureEnd(e) {

        e.preventDefault()

        if (!spirit) return

        canvas.removeChild(spirit)

        spirit = null

        startScale = null

        startRotation = null

    }

/* $(".imgbox img").bind("touchstart", touchStart, false)

$(".imgbox img").bind("touchmove", touchMove, false)

$(".imgbox img").bind("touchend", touchEnd, false)

$(".imgbox img").bind("gestureend", gestureEnd, false)

$(".imgbox img").bind("tap", imgreset, false)

     */

---