JS事件监听手机屏幕触摸事件 Touch
2014-03-30 05:00
447 查看
处理Touch事件能让你跟踪用户的每一根手指的位置,可以绑定以下四种Touch事件:
事件属性一般通过event.changedTouches获得
简单实现
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; }
相关文章推荐
- JS事件监听手机屏幕触摸事件 Touch
- Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch
- JS事件监听手机屏幕触摸事件 Touch
- [置顶] touch事件(监听手机屏幕触摸事件)
- JS事件监听手机屏幕触摸事件
- cocos2d JS touch屏幕点击事件监听 cc.EventListener.TOUCH
- cocos2d JS touch屏幕点击事件监听 cc.EventListener.TOUCH
- cocos2d JS touch(触摸监听)-快速添加事件监听器到管理器
- js监听手机屏幕亮度、震动、方向变化
- <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
- JS -判断、监听屏幕横竖屏切换事件
- 打印touch事件,打印手机触摸事件
- android中Tween动画的监听事件【实现小球在手机屏幕运动一圈】
- 打印touch事件,打印手机触摸事件
- Android开发08_OnTouchevent触摸事件(手势监听)
- js的触摸事件touch
- 手机页面touch触摸事件
- 手机触摸 事件, 当触摸屏幕时候触发
- 用touchStart事件代替click处理手机页面上的触摸事件
- HTML5触摸事件touch监听