移动端触摸事件
来源:互联网 发布:github源码在微信上 编辑:程序博客网 时间:2024/05/29 02:42
ouchstart 开始触摸
touchmove 手指移动
touchend 结束触摸
touchstart 在手指触摸的一瞬间发生,如果有多个手指触摸,每个手指触摸的时候都会发生。
touchend 在手指离开屏幕的一瞬间发生,如果有多个手指离开,每个手指离开的时候都是触发这个事件。
绑定他们的时候,只能用DOM2级来绑定,不能用window.on*来绑定。**
<script type="text/javascript"> var box = document.querySelector("#box"); box.addEventListener("touchstart", function(){ box.innerHTML = "你触摸了我"; }, true); box.addEventListener("touchend", function(){ box.innerHTML = "你结束触摸了我"; }, true); </script>
注意,touchstouch事件和touchmove事件中event事件对象中有一个属性叫做touches是一个数组,里面封装了每个手指的信息,包括手指的位置、手指的粗细、力度(仅仅iPhone7提供)都有.
每根手指的位置信息:
//触摸移动box.addEventListener("touchmove", function(event){ //阻止默认事件 event.preventDefault(); //得到每个手指的信息 var fingers = event.touches; //清空 box.innerHTML = ""; //遍历每个手指,显示信息 for(var i = 0 ; i < fingers.length ; i++){ box.innerHTML += "第" + i + "根手指位置" + fingers[i].clientX + "," + fingers[i].clientY + "<br />"; }}, true);
最后说一个问题,就是手机中也有click事件,但是click事件比touchstart要晚触发200ms到300ms左右,因为浏览器有默认的一些手指快捷操作,比如双击两次放大视口。如果你用click写了一个div的单击事件,此时点击之后浏览器会等待200~300ms时间看看你有没有第二次点击,如果200~300ms以内没有点击,此时触发你的click事件,如果有点击,则你的click事件业务不发生,而是放大视口。但是touchstart不会等待,只要你碰到了屏幕一定会执行touchstart事件。
注意,a标签执行的是类似click事件,等于说a标签被延迟了200~300触发,所以手机web中越来越不使用a标签跳转了,而是touchstart事件跳转。方法就是让元素携带data-href属性,然后用js批量给他们绑定的touchstart事件,让window.location切换为自己携带的data-href属性的值。
<div id="box"data-herf="http://m.taobao.com"></div><div id="box"data-herf="http://m.dangdang.com"></div>var herfBoxs = document.querySelectorAll("[data-herf]");for(var i = 0 ; i < herfBoxs.length ; i++){ herfBoxs[i].index = i; herfBoxs[i].addEventListener("touchstart", function(){ window.location = this.getAttribute("data-herf"); }, true);}
- 移动端 触摸事件
- 移动端触摸事件
- 移动端触摸事件
- 移动端触摸事件
- 移动端触摸事件
- 移动端js触摸事件
- 移动端js触摸事件
- 移动端js触摸事件
- 移动端js触摸事件
- 移动端js触摸事件
- 移动端触摸事件总结
- 移动端js触摸事件大全
- 移动端js触摸事件大全
- html5移动端触摸事件touch
- web移动端触摸事件封装
- Html5 移动端 触摸滑动事件
- hammer.js移动端触摸事件
- 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel
- 维吉尼亚密码暴力破解c++实现
- Kotlin属性和变量-2.2-Properties and Fields
- oo分析与设计
- linux下VSFTPD安装
- PHP__set和__get魔术方法
- 移动端触摸事件
- C语言运算符总结
- 超大文件编码转换
- Prim算法
- 位运算
- cuda并行编程基础(二)
- Kotlin-1.3-控制流程(if, when, for, while)
- 开启博客-2017年12月19日
- c语言int类型的范围为什么是-2^32到(2^31)-1