这篇文章讲到了很多关于手机触摸事件的知识,比如touchstart,touchmove,touchend,对于获取屏幕的左右跟网页版的也是不一样的哦。我以前也比较少接触这方面的知识,最近做一个项目才发现原来用event.pageX是获取不了当前的位置(在手机上)。需要用到var touch = event.originalEvent.touches[0]; 然后touch.pageX才可以在手机里面获取。我今后会分享多一些这方面的内容,关于移动开发其实也挺有趣的。web开发者需要一种方法来处理这些事件。例如,几乎所 有的快节奏游戏都需要玩家一次按下多个按钮,这种方式,在触摸屏情况下,意味着多点触摸。ios 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。 触摸事件 下面的这段代码让你使用单指触摸来四处拖曳一个DOM元素:obj.addEventListener(‘touchmove’, function(event) { 还有Browser Ninja,一个技术演示,是一个使用了css3的转换、过渡和画布的Fruit Ninja克隆。 看看这篇关于移动html 5的文章,了解更多关于视图区设置的信息。event.preventDefault(); 最后一点,因为你是在为移动设备做开发,因此你应该要留心移动的最佳做法,这些在Eric Bidelman的文章中有论及,以及要了解这一W3C文档。iphone上测试了iOS 4.2。 规范提供了额外的三个触摸事件,但被测试的浏览器没有支持它们:3. touchcancel:触摸被中断(实现规范)。Android 2.3.3 (Nexus)Android 3.0.1 (Xoom)for (var i = 0; i < event.targetTouches; i++) { 单点触摸事件 另外还有Touchable这一jQuery插件,该插件跨平台地统一了触摸和鼠标事件。JS填充工具,其捕捉来自触控板的触摸事件,然后把它们转换成标准兼容的触摸事件。 2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。 < head> 需要注意的一点是,你的手势可以是和OS层面的多点触摸手势相同的。在OS X上,你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:2. touchmove:手指拖曳一个DOM元素。
3. touchend:手指从一个DOM元素上移开。3. changedTouches:涉及当前事件的手指的一个列表。3. 客户/页面/屏幕坐标:动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle:画出大约相当于手指形状的椭圆形。
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX + ‘px’;
obj.style.top = touch.pageY + ‘px’;
}
}, false);for (var i = 0; i < event.touches.length; i++) {
var touch = event.touches[i];
ctx.beginPath();
ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();
}
}, false);
}, false);renderTouches(event.touches);
},canvas.addEventListener(‘touchmove’, function(event) {
touches = event.touches;
}, false);renderTouches(touches);
}, 15);使用targetTouches和changedTouches
var touch = event.targetTouches[i];
console.log(‘touched ‘ + touch.identifier);
}
}, false);for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
obj.addEventListener(‘touchmove’, function(event) {
if (event.targetTouches.length == 1) {
console.log(‘touched ‘ + event.targetTouches[0].identifier);
}
}, false);
}
iOS 4.x (iPad, iPhone)
…
< script src=”/path/to/magictouch.js” kesrc=”/path/to/magictouch.js”>< /script>
< /head>Touch input plugin failed to load!
< /object>
< /body>
一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。