touch实现click

有了touch事件,click事件将失效。那么有时候我们需要同一个对象有touch,还要有click,该怎么办?


很简单,首先得明白一个问题:

click的特性:同一个位置,鼠标停留大约不超过300ms,可认为是click事件。


touch有开始,移动,结束三个方法,根据click的特性可以判断那种touch是点击行为。

var timeStamp_start=0.0;//触摸开始时间戳
var timeStamp_end=0.0;//触摸结束时间戳

var x_start=0.0;//触摸开始x坐标
var y_start=0.0;//触摸开始y坐标


var x_end=0.0;//触摸结束x坐标
var y_end=0.0;//触摸结束x坐标

$(document).on('touchstart','.changeimg',function(e) {
     
    var _touch = e.originalEvent.targetTouches[0]; 
   
   	timeStamp_start=e.timeStamp;  
   	x_start= _touch.pageX;
	y_start=_touch.pageY;
	
    e.preventDefault();
})

$(document).on('touchmove','.changeimg',function(e) {
	var _touch = e.originalEvent.targetTouches[0]; 
     
    e.preventDefault(); 
    e.stopPropagation(); 
});

$(document).on('touchend','.changeimg',function(e) {console.log(e);timeStamp_end=e.timeStamp;
	var _touch = e.originalEvent.changedTouches[0]; 
   
    e.preventDefault();
    e.stopPropagation();
    
    timeStamp_end=e.timeStamp;  
   	x_end= _touch.pageX;
	y_end=_touch.pageY;
//判断条件,时间差<=300 并且  在同一个位置
    if(timeStamp_end-timeStamp_start<=300&&x_start==x_end&&y_start==y_end)alert('点击了我');
})




  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值