touch移动触屏滑动事件

Posted chenxj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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对象的ID
target: //当前的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移动触屏滑动事件的主要内容,如果未能解决你的问题,请参考以下文章

移动端touch触屏滑动事件、滑动触屏事件监听!

js实现touch移动触屏滑动事件

js实现touch移动触屏滑动事件

移动端触屏滑动,JS事件

JS移动客户端--触屏滑动事件

Touch事件及触屏滑动距离计算