有了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('点击了我');
})