首页 > 代码库 > touch移动触屏滑动事件
touch移动触屏滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。
四种touch事件
- touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发。
- touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动。
- touchend 当手指从屏幕上移开时触发
- touchcancel 当系统停止跟踪触摸时触发(这个事件没有确定的触发时间)
它们都是冒泡的,也可以取消。
<script> window.onload = function(){ document.addEventListener("touchmove", _touch, false);}function _touch(event){ alert(1);}</script>
每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸属性
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置pageX / pageY: //触摸点相对于页面的位置screenX / screenY: //触摸点相对于屏幕的位置identifier: //touch对象的IDtarget: //当前的DOM元素
一些手势
- gesturestart 当一个手指按在屏幕上另外一个手指又触摸屏幕时触发
- gesturechange 依赖前者当其中的一个手指发生改变时触发
- gestureend 当任何一个手指离开时触发
注意:
手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
2.禁止滚动
preventDefault是阻止默认行为,touch事件的默认行为就是滚动。event.preventDefault();
例如:
document.body.addEventListener(‘touchmove‘, function(event) { event.preventDefault();}, false);
完整示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>touch</title> <script> 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);</script> </head> <body> <div id="inp">div</div></body> </html>
touch移动触屏滑动事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。