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

最新推荐文章于 2020-02-28 15:50:32 发布

原创最新推荐文章于 2020-02-28 15:50:32 发布 · 3.8k 阅读

CC 4.0 BY-SA版权

本文介绍了JavaScript如何处理手机端的触摸事件，包括touchstart、touchmove、touchend和touchcancel四个事件，特别提到在touchmove事件中使用preventDefault()可以阻止屏幕滚动。并提供了手机端上下左右滑动的事件实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于手机端没有鼠标，所以就出现了触摸事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。

下面写的一个手机端上下左右滑动事件

代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>滑动</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        * {padding: 0px; margin: 0px;}   
        body { height: 100%; width: 100%;}
        .box {width: 200px;height: 200px;background:#abcdef;margin: 20px auto;}
    </style>
</head>
 <body> 
 <div class="box"></div>
 <script type="text/javascript">
 $(function() {
     $('body').on('touchstart', '.box', function(e) {
         var touch = e.originalEvent;
         startX = e.originalEvent.changedTouches[0].pageX;
         startY = e.originalEvent.changedTouches[0].pageY;
         $(".box").on('touchmove', function(e) {
             e.preventDefault();
             touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
             if(touch.pageX - startX > 10) {
                 alert("右划");
             } else if(touch.pageX - startX < -10) {
                 alert("左划");
             };
             if(touch.pageY - startY > 10) {
                 alert("下划");
             } else if(touch.pageY - startY < -10) {
                 alert("上划");
             };
             $(".box").off('touchmove');
          });
           return false;
     }).on('touchend', function() {
         $(".box").off('touchmove');
     })
 }) 
 </script> 
 </body>
 </html>