Question

javascript 在移动端怎么做到左右触摸事件 ontouchmove吗？求代码

javascript 在移动端怎么做到左右触摸事件 ontouchmove吗？求代码，比如手指向左滑动这个事件怎么写，求大神 有高分啊！！

Answer 1

ontouchmove 自己是做不到的
给你一个思路吧：
touchstart 触发过程中 记录touches的触点坐标
touchend 触发过程中通过 touches的触点坐标 和前一个坐标进行计算得出移动的方向和距离

追问

怎么计算他们的位置出来呢？我想做一个触摸切换图片的一个效果；

追答

var mx=0;

var obj=document.getElementById('目标id');
obj.ontouchstart=function(e){
mx=e.touches[0].pageX

}
obj.ontouchend=function(e){
if(mx-e.touches[0].pageX>10)
{
// 右移动 10 个像素以上

}
else if(mx-e.touches[0].pageX<-10)
{
// 左移动

}
else
{
// 没动
}

}

未连接移动设备进行测试，不知道是否正确，只是抛砖引玉而已

追问

很不灵敏的，有出来触动有时候不触动的。
你会做判断一张图片（div）是否显示在窗口吗，然后执行另外的代码、谢谢您了！

追答

因为当前 事件是作用在 obj 上，所以慢，您可以作用在 window 对象上，这样快很多，不过要对 y 轴进行判断, 因为要作用到目标区域才有效吗

很早很早以前做过一个画线的小程序，您可以将其作用普通对象上和window 对象上进行对比，速度差很多

mx=0;my=0;
addTouchListeners();

function addTouchListeners() {
if(typeof(window.ontouchstart) === 'undefined'){ //不支持触屏
return;
};
document.addEventListener('touchstart', function(e) {

mx=e.touches[0].pageX,my=e.touches[0].pageY;
context.beginPath();

}, false);

document.addEventListener('touchmove', function(e) {
//单点触摸
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
context.lineTo(e.touches[0].pageX,e.touches[0].pageY)
context.closePath();
context.stroke();
mx=e.touches[0].pageX,my=e.touches[0].pageY;

}, false);
document.addEventListener('touchend', function(e) {

}, false);
}

追问

没效果哦，你能用'touchstart'，'touchmove'，'touchend'做出一个向左向右触摸的一个事件出来吗，向左触摸弹出一个窗口，向右也弹出一个窗口吧。

追答

var obj=document.getElementById('目标id');
改成 var obj=window;

Answer 2

$( "div.box" ).on( "swipeleft", function(){..});

jquerymobile 自带swipe事件 原理是mousemove