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

来源：互联网发布：淘宝饰品网店计划书编辑：程序博客网时间：2024/06/06 00:56

由于手机端没有鼠标，所以就出现了触摸事件。触摸事件(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>

阅读全文

0 0