html5支持2指触摸吗,手机站建设HTML5触摸屏touch事件使用介绍

市面上手机种类繁多，在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的。由于设备的不同浏览器的事件的设计也不同。传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用，但是效果不够好。PC上还没有哪个事件是可以与触屏手机的触摸事件对应的，为了更好的用户体验，移动站点的建设也需要对不同的事件进行处理。

介绍几种兼容比较好的触摸事件，大部分触屏设备都支持的。

touchstart：触摸开始的时候触发

touchmove：触摸时手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

touchcancel：系统取消touch事件的时候触发

事件绑定，代码示例：

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

}

};

触摸事件属性介绍

touches：当前位于屏幕上的所有触点的列表，IOS支持的比较好，目前Android系统的浏览器一般对多点触控不敏感。

targetTouches：位于当前触点之下的DOM节点。

changedTouches：事件触发时的触点。

每个触摸点由包含了如下触摸信息

identifier：唯一标识触摸会话。

target：事件目标DOM元素。

pageX/pageX/clientX/clientY/screenX/screenY：页面/窗口/屏幕的位置。

radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。