html5手机端触屏事件(touch事件)第二章

最新推荐文章于 2024-06-16 15:54:48 发布

原创最新推荐文章于 2024-06-16 15:54:48 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #手机 #移动

Web前端开发专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了触摸屏事件的处理机制，包括touchstart、touchmove、touchend和touchcancel四种主要事件类型及其触发条件。文中还提供了如何获取触摸点位置及编写事件处理函数的具体示例。

touchstart: // 手指放到屏幕上的时候触发
touchmove: // 手指在屏幕上移动的时候触发
touchend: // 手指从屏幕上拿起的时候触发
touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消，不详
事件属性一般通过 event.changedTouches获得

client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：//触摸点相对于屏幕的位置
identifier： // touch对象的unique ID

简单实现
var startX=startY=0;
function touchSatrtFunc(e) {  
        e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
        var touch = e.Touches[0]; //获取第一个触点  
        var x = Number(touch.pageX); //页面触点X坐标  
        var y = Number(touch.pageY); //页面触点Y坐标  
        startX = x;  
        startY = y; 
}

//touchmove事件 
function touchMoveFunc(e) {  
        e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
                var touch = e.touches[0];
                var x = touch.pageX - startX,
                        y = touch.pageY - startY;
                var text = 'Move：（' + (x) + ', ' + y + '）';  
                document.title = text;
}

//touchend事件 
function ToucheEndFunc(e) {  
        e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等  
        var touch = e.changedTouches[0]; //获取第一个触点  

        var x = touch.pageX; //页面触点X坐标          
        var y = Number(touch.pageY); //页面触点Y坐标  
        var text = 'end：（' + x + ', ' + y + '）';  
        document.title = text;
}