HTML5的touch事件

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 
　　一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。 
　　在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明： 

　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 
　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 
　　touchend事件：当手指从屏幕上离开的时候触发。 
　　touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。 

　　上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。 

　　touches：表示当前跟踪的触摸操作的touch对象的数组。 
　　targetTouches：特定于事件目标的Touch对象的数组。 
　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。 

　　每个Touch对象包含的属性如下。 

　　clientX：触摸目标在视口中的x坐标。 
　　clientY：触摸目标在视口中的y坐标。 
　　identifier：标识触摸的唯一ID。 
　　pageX：触摸目标在页面中的x坐标。 
　　pageY：触摸目标在页面中的y坐标。 
　　screenX：触摸目标在屏幕中的x坐标。 
　　screenY：触摸目标在屏幕中的y坐标。 
　　target：触目的DOM节点目标。 

　　上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。 

function load (){document.addEventListener('touchstart',touch, false);document.addEventListener('touchmove',touch, false);document.addEventListener('touchend',touch, false);function touch (event){var event = event || window.event;var oInp = document.getElementById("inp");switch(event.type){case "touchstart":oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";break;case "touchend":oInp.innerHTML = "<br/>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";break;case "touchmove":event.preventDefault();oInp.innerHTML = "<br/>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";break;}}
}
window.addEventListener('load',load, false);

HTML代码 
<div id="inp"></div>  


上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到div标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。 
　　这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下： 

　　(1)touchstart 
　　(2)mouseover 
　　(3)mousemove(一次) 
　　(4)mousedown 
　　(5)mouseup 
　　(6)click 
　　(7)touchend 

　　介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和Chrome也支持触摸事件。

　　

　　touches,targetTouches,changedTouches的区别：

　　比如div1, div2只有div2绑定了touchstart事件，第一次放下一个手指在div2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch，然后，再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。

转载于:https://www.cnblogs.com/jyybeam/p/5801021.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/418146.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端学习（2081）：三种方案对比es5没有闭包

前端学习（2081）：三种方案对比es5没有闭包

阅读更多...
神经网络的介绍

神经网络的介绍

对于线性的定义&#xff1a;满足可加性和齐次性。
阅读更多...
iOS 集成银联支付

iOS 集成银联支付

转自&#xff1a;http://www.jianshu.com/p/92d615f78509 当初集成支付宝的时候 觉得见了这么丑的代码 加上这么难找的下载地址 在配上几乎为零的文档 寒哥就要吐血了下午去集成银联 才知道 血吐的早了 下载地址 https://open.unionpay.com/upload/download/Development_kit854…
阅读更多...
前端学习（2082）：const得使用和注意点

前端学习（2082）：const得使用和注意点

阅读更多...
pytorch入门使用

pytorch入门使用

1、创建张量&#xff1a; 2、张量的方法和属性&#xff1a; (1) t1.item()只能用于张量中只有一个数据的情况下获取张量内的值 &#xff08;2&#xff09;numpy() 将tensor转换为numpy数组 t2 torch.tensor([[[1, 2]]]) print(t2) print(t2.numpy()) 输出结果&#xff1a;…
阅读更多...
.net core学习

.net core学习

http://www.cnblogs.com/artech/ http://www.blogs8.cn/posts/AA0E630 http://pan.baidu.com/s/1bo4fJ47 http://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-1-getting_started.html转载于:https://www.cnblogs.com/jiangjing/p/5804542.html
阅读更多...
Tomcat中组件的生命周期管理(三)

Tomcat中组件的生命周期管理(三)

本文主要目的是自定义举例分析Catalina内部生命周期管理的运作方式以及拿内部具体源码来具体分析 假设我们有一台电脑由主机(我们用cpu表示&#xff09;和显示器构成&#xff0c;那么我们要运用上篇文章学到的内容&#xff0c;来管理整个电脑的启动和关闭&#xff0c;先看我们对…
阅读更多...
Python rang()函数

Python rang()函数

返回类型为迭代器 r range(11) print(r) 若输出r中的值&#xff0c;需要调用list(r) print(list(r)) 输出&#xff1a; 方法二: #二&#xff1a; r1 range(1,10) print(list(r1)) 方法三&#xff1a; #三&#xff1a; r2 range(1,10,2) print(list(r2)) 判断某一个数是…
阅读更多...
Python 中的 while循环 和 for... in ...循环

Python 中的 while循环 和 for... in ...循环

for item in Python:print(item, end) print()for item in range(10):print(item, end)# 当不需要自定义变量时候&#xff0c;可以用”_“代替 for _ in range(5) :print(hello world)# 计算累加和 sum 0 for i in range(1,101) :if i%20 :sum i print(sum) While: a 0 while…
阅读更多...
css笔记——css 实现自定义按钮

css笔记——css 实现自定义按钮

css实现自定义按钮的样式实际上很早就有了&#xff0c;只是会用的人不是很多&#xff0c;里面涉及到了最基础的css写法&#xff0c;在火狐中按钮还是会显示出来&#xff0c;这时需要将i标签的背景设置为白色&#xff0c;同时z-index设置比input高一些&#xff0c;这样才可以把按…
阅读更多...
Hibernate中主键生成策略

Hibernate中主键生成策略

主键生成策略 increment identity sequence native uuid assigned 1) increment 由hibernate完成 主键递增&#xff0c; 原理&#xff1a;select max(id) , insert时max(id)1 &#xff0c;完成主键递增 优点&#xff1a;跨数据库 缺点&#xff1a;多线程并发访问问题&#xff0…
阅读更多...
Python四大金刚之一：列表

Python四大金刚之一：列表

前言 列表中可以存储多个数据类型不同的对象 一个对象的内存空间&#xff1a; 因此一个列表的内存空间为: a 10 lst [hello , a , a ,world] print(lst) print(type(lst)) print(id(lst))print(lst[0] type: , type(lst[0])) 一、列表的创建&#xff1a; 内存示意图: #创建…
阅读更多...
前端学习（2087）：v-on得修饰符使用案例

前端学习（2087）：v-on得修饰符使用案例

阅读更多...
牛客网未通过代码---

牛客网未通过代码---

请实现一个算法&#xff0c;在不使用额外数据结构和储存空间的情况下&#xff0c;翻转一个给定的字符串(可以使用单个过程变量)。 给定一个string iniString&#xff0c;请返回一个string&#xff0c;为翻转后的字符串。保证字符串的长度小于等于5000。 string reverse(string …
阅读更多...
Python四大金刚之二：字典

Python四大金刚之二：字典

引言 列表、字典&#xff1a;可变序列&#xff0c;可以执行增删改排序等 字典&#xff1a;无序的 一、字典的创建 #使用{}创建 scores {张三:100 ,李四:98 ,王麻子:72} print(scores) print(type(scores))#使用内置函数dict() student dict(name jack , age 16) print(st…
阅读更多...
Java 加密 base64 encode

Java 加密 base64 encode

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 【前言】 计算机中的数据都是二进制的&#xff0c;不管是字符串还是文件&#xff0c;而加密后的也是二进制的&#xff0c; 而我们要看到的往往是字符串&#xff0c;本文就介绍了将byte[]转为各种进制…
阅读更多...
Python四大金刚之三：元组

Python四大金刚之三：元组

引言 一、元组的创建方式 #第一种: t (python,No.1) print(t) print(type(t)) #第二种: 内置函数tuple() t1 tuple((python,No.2)) print(t1) print(type(t1))注&#xff1a;当元组中只有一个元素时候&#xff0c;需要加 逗号&#xff01;&#xff01;&#xff01;&#xff…
阅读更多...
snapshot---caffemodel和solverstate

snapshot---caffemodel和solverstate

生成的caffemodel文件去做分类&#xff0c;solverstate是用来中断训练后重新开始的状态文件。RestoreSolverState&#xff08;&#xff09;可以用来读取solverstate存储的训练状态&#xff0c;继续训练~但是感觉solverstate除了可以在断电、服务器跪的情况&#xff0c;别的好像…
阅读更多...
Python四大金刚之四：集合

Python四大金刚之四：集合

引言 一、集合的创建方式 #使用{} s {1,2,3,4,3,2} #不允许重复元素 print(s)#使用内置函数set() s set(range(6)) print(s) print(set(range(9))) print(set([10,12,13,4])) print(set(Python)) 二、集合的相关操作 set {10,20,30,40,50} print(10 in set) #新增操作 #add…
阅读更多...
Swift-属性监听

Swift-属性监听

监听属性的改变(开发中使用很多) oc中长是重写set方法 swift通过属性监听器 class Dog: NSObject {var name:String?{ // 属性监听器 // 属性即将改变监听willSet{ // print("111") // print(name)print(newValue)} // …
阅读更多...
最新文章

Copyright @ 2022~2023