touch实现click

最新推荐文章于 2023-11-10 16:40:53 发布

原创最新推荐文章于 2023-11-10 16:40:53 发布 · 971 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#touch和click #touch实现click #touch替代click

js总结专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种方法，使得在触屏设备上同一元素既能响应touch事件也能响应click事件。通过记录touchstart和touchend的时间及坐标，当两次触摸事件时间间隔小于300毫秒且位置相同，则认为是click事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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