手机端html5触屏事件(touch事件)

touchstart:触摸开始的时候触发

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

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

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

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

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

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

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

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);

 

时间: 2024-10-21 14:03:19

手机端html5触屏事件(touch事件)的相关文章

转:手机端html5触屏事件(touch事件)

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses

手机端html5触屏事件(touch事件)【转】

touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch ses

jquery -- 触屏设备touch事件

几种普及得比较好的触摸事件,你可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备哦): touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targetTouches:位于当前DOM元素上手指的列表. changedTouches:涉及当前事件手指的列表. 每个触摸点由包含

手机端Swiper 触屏滑动

在线实例 默认 响应式 垂直 空间间隔 滚动 自动滚动 中心化 中心化自动 免费模式 多个滚动 水平滚动 grab-cursor 使用方法 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slid

仿今日头条app手机端顶部触屏滑动导航

swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <l

jQuery,zepto手机端用on将子元素事件委托给body或document无效

jQuery,zepto手机端用on将子元素事件委托给body或document无效 在移动端,绑定在普通的div元素上是可以的,但是绑定在body上无效,document也是无效. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=d

问卷调查 for Html5触屏版

什么是Html5触屏版? 采用最新HTML5技术,无需下载安装.无需下载升级,使用移动设备浏览器,就能访问自适应屏幕大小的访问界面,微信也能扫描访问. 为什么已经有PC网页版和移动端APP版还需要Html5触屏版? 首先PC网页版是基于传统PC上的浏览器使用,在移动浏览器上会出现屏幕大小伸缩,不适合在移动终端浏览器上使用. 而移动端APP版需要按照才能使用,基于Html5触屏版使用手机浏览器就能访问. Html5触屏版与传统的手机wap网页的区别? 传统的wap网页更适合之前的功能机,html5

手机触屏的js事件

处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart:  // 手指放到屏幕上的时候触发 2.touchmove:  // 手指在屏幕上移动的时候触发 3.touchend:  // 手指从屏幕上拿起的时候触发 4touchcancel:  // 系统取消touch事件的时候触发.至于系统什么时候会取消,不详 属性 1.client / clientY:// 触摸点相对于浏览器窗口viewport的位置 2.pageX / pageY:

触屏设备触摸事件实验和记录

1. 事件概述 触屏设备的原始触摸事件有四个,[touchstart][touchmove][touchend][touchcancle],这里只讲前三个,因为最后一个是被动被打断时冒出的事件. 2. touchstart 用户把手指放到屏幕上的一刹那,触发的事件. 3. touchmove 用户用手指在屏幕上滑动,会持续触发这个事件. 4. touchend 用户的手指离开屏幕时触发的事件. 5. 属性概述 每一次触发事件,这个事件会 attach 一些 properties,就是附带一些额外