手机站建设HTML5触摸屏touch事件使用介绍技术
原文链接 : http://blog.lmlphp.com/archives/56 来自 : LMLPHP后院
市面上手机种类繁多，在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的。由于设备的不同浏览器的事件的设计也不同。传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用，但是效果不够好。PC上还没有哪个事件是可以与触屏手机的触摸事件对应的，为了更好的用户体验，移动站点的建设也需要对不同的事件进行处理。
介绍几种兼容比较好的触摸事件，大部分触屏设备都支持的。
touchstart：触摸开始的时候触发
touchmove：触摸时手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
touchcancel：系统取消touch事件的时候触发
事件绑定，代码示例：
<script>
var obj = document.getElementById(‘id‘);
obj.addEventListener(‘touchstart‘, touchStart, false);
obj.addEventListener(‘touchmove‘, touchMove, false);
obj.addEventListener(‘touchend‘, touchEnd, false);
var touchMove = function(event) {
if (event.targetTouches.length == 1) {
// prevent default
event.preventDefault();
var touch = event.targetTouches[0];
// do something
}
};
</script>
触摸事件属性介绍
touches：当前位于屏幕上的所有触点的列表，IOS支持的比较好，目前Android系统的浏览器一般对多点触控不敏感。
targetTouches：位于当前触点之下的DOM节点。
changedTouches：事件触发时的触点。
每个触摸点由包含了如下触摸信息
identifier：唯一标识触摸会话。
target：事件目标DOM元素。
pageX/pageX/clientX/clientY/screenX/screenY：页面/窗口/屏幕的位置。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。
时间： 2024-08-02 11:03:00