整理HTML5移动端开发的常用触摸事件

2020-04-25 07:28:54易采站长站整理

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。

JavaScript操作小例子:

JavaScript Code复制内容到剪贴板

var obj = document.getElementByIdx_x(‘id’);   
obj.addEventListener(‘touchmove’, function(event) {   
     // 如果这个元素的位置内只有一个手指的话   
    if (event.targetTouches.length == 1) {   
     event.preventDefault();// 阻止浏览器默认事件,重要    
        var touch = event.targetTouches[0];   
        // 把元素放在手指所在的位置   
        obj.style.left = touch.pageX-50 + ‘px’;   
        obj.style.top = touch.pageY-50 + ‘px’;   
        }   
}, false);