天天看點

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('點選了我');
})