触摸（Touch）事件

最新推荐文章于 2024-08-11 20:48:15 发布

uhhuh-495

最新推荐文章于 2024-08-11 20:48:15 发布

阅读量1.3k

点赞数

分类专栏：常用代码文章标签： js JQuery touch 触摸事件

本文链接：https://blog.csdn.net/weixin_42166007/article/details/87393764

版权

常用代码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细解析了触摸事件的工作原理，包括touches、targetTouches、changedTouches等关键属性，以及screenX/Y、clientX/Y、pageX/Y坐标系的含义。通过一个具体的案例，展示了如何使用JavaScript监听并处理touchstart、touchmove、touchend事件，记录触摸开始、移动和结束的位置。

摘要由CSDN通过智能技术生成

Touch事件：

touches：当前位于屏幕上的所有手指的一个列表
targetTouches：位于当前DOM元素上的手指的一个列表；
changedTouches：涉及当前事件的手指的一个列表；
screenX，screenY：触摸点相对于屏幕上边缘的坐标；
clientX，clientY：触摸点相对于浏览器的viewport左边缘的坐标，不包括左边的滚动距离；
pageX，pageY：触摸点相对于document的左边缘的坐标，与clientX不同的是它包括左边滚动的距离，如果有的话；
target：总是表示手指最开始放在触摸设备上的触发点所在位置的element。

触摸事件案例：

Html代码：

<div class="touch_box">
    <p class="p1">start</p>
    <p class="p2">move</p>
    <p class="p3">end</p>
</div>

JS代码：

var start,move,end;
/*
touches ：当前位于屏幕上的所有手指的一个列表。
targetTouches ：位于当前DOM元素上的手指的一个列表。
changedTouches ：涉及当前事件的手指的一个列表。
*/

/*原生写法*/
var box = $(".touch_box")[0];
var p1 = $(".touch_box .p1");
var p2 = $(".touch_box .p2");
var p3 = $(".touch_box .p3");
//点触开始--begin
box.addEventListener("touchstart", function (e){
	// 记录开始按下时的点
    var touches = event.touches[0];
    start = { 
        /*
        screenX,screenY:触摸点相对于屏幕上边缘的坐标;
        clientX,clientY:触摸点相对于浏览器的viewport左边缘的坐标,不会包括左边的滚动距离;
        pageX,pageY:触摸点相对于document的左边缘的坐标,与clientX不同的是,他包括左边滚动的距离,如果有的话;
        target:总是表示 手指最开始放在触摸设备上的触发点所在位置的element;
        toFixed(x)：转换为有x位小数的数据;
        */
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
	p1.html("触摸开始："+ e.target.tagName + "-" + "(" + start.x + "," + start.y + ")");
});
//点触开始--end

//点触移动--begin
box.addEventListener("touchmove", function (e){
	//记录移动的距离
	var touches = event.touches[0];
	move = {
        x: (touches.pageX - start.x).toFixed(2),
        y: (touches.pageY - start.y).toFixed(2)
    };
    p2.html("触摸移动："+ e.target.tagName + "-" + "(" + move.x + "," + move.y + ")");
});
//点触移动--end

//点触结束--begin
box.addEventListener("touchend", function (e){
	// 记录开始结束时的点
    var touches = event.changedTouches[0];  //此处不能用"touches[0]"
    end = {  
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
    p3.html("触摸结束："+ e.target.tagName + "-" + "(" + end.x + "," + end.y + ")");
})
//点触结束--end

/*
//Jq写法
//点触开始--begin
$(".touch_box").on('touchstart',function(e) {
	var touches = e.originalEvent.targetTouches[0]; 
	start = { 
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
	$(".touch_box .p1").html("触摸开始：(" + start.x + "," + start.y + ")");
});
//点触开始--end

//点触移动--begin
$(".touch_box").on('touchmove',function(e) {
	var touches = e.originalEvent.targetTouches[0]; 
    move = {
        x: (touches.pageX - start.x).toFixed(2),
        y: (touches.pageY - start.y).toFixed(2)
    };
    $(".touch_box .p2").html("触摸移动：(" + move.x + "," + move.y + ")");
});
//点触移动--end

//点触结束--begin
$(".touch_box").on('touchend',function(e) {
	var touches = e.originalEvent.changedTouches[0];   //此处不能用"targetTouches[0]"
    end = {  
        x: touches.pageX.toFixed(2), // 横坐标
        y: touches.pageY.toFixed(2)  // 纵坐标
    };
    $(".touch_box .p3").html("触摸结束：(" + end.x + "," + end.y + ")");
})
//点触结束--end
*/