html5触摸事件判断滑动方向的实现


Posted in HTML / CSS onJune 05, 2018

为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力.

接口

TouchEvent

TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。每 个 Touch 对象代表一个触点; 每个触点都由其位置,大小,形状,压力大小,和目标 element 描述。 TouchList 对象代表多个触点的一个列表.

触摸事件的类型

为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型

  1. touchstart:当用户在触摸平面上放置了一个触点时触发。
  2. touchend:当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。
  3. touchmove:当用户在触摸平面上移动触点时触发。
  4. touchcancel:当触点由于某些原因被中断时触发。

判断滑动方向

基本原理就是记录开始滑动(touchStart)和结束滑动(touchEnd)的坐标位置,然后进行相对位置的计算。

touchStart:function(e){
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
    e = e || window.event;
 },
touchEnd:function(e){
    const that = this;
    endX = e.changedTouches[0].pageX;
    endY = e.changedTouches[0].pageY;
    that.upOrDown(startX,startY,endX,endY);
},
upOrDown:function (startX, startY, endX, endY) {
    const that = this;
    let direction = that.GetSlideDirection(startX, startY, endX, endY);
    switch(direction) {
      case 0:
        console.log("没滑动");
        break;
      case 1:
        console.log("向上");
        break;
      case 2:
        console.log("向下");
        break;
      case 3:
        console.log("向左");
        break;
      case 4:
        console.log("向右");
        break;
      default:
        break;
    }
  },
//根据起点和终点返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑动
  GetSlideDirection:function (startX, startY, endX, endY) {
    const that = this;
    let dy = startY - endY;
    let dx = endX - startX;
    let result = 0;
    //如果滑动距离太短
    if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
      return result;
    }
    let angle = that.GetSlideAngle(dx, dy);
    if(angle >= -45 && angle < 45) {
      result = 4;
    }else if (angle >= 45 && angle < 135) {
      result = 1;
    }else if (angle >= -135 && angle < -45) {
      result = 2;
    }
    else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
      result = 3;
    }
    return result;
  },
  //返回角度
  GetSlideAngle:function (dx, dy) {
    return Math.atan2(dy, dx) * 180 / Math.PI;
  }

原生JS方法

除了H5新增的方法外,还可以用原生JS判断view的滑动方向,代码如下(可直接运行):

要注意的是chrome对document.body.scrollTop一直是0,需要改成document.documentElement.scrollTop

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> 三水点靠木(3water.com)</title>
  <style>
    div {
      border: 1px solid black;
      width: 200px;
      height: 100px;
      overflow: scroll;
    }
  </style>
</head>
<body style="overflow: scroll">
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<script>
  function scroll( fn ) {
    var beforeScrollTop = document.documentElement.scrollTop,
      fn = fn || function() {};
    console.log('beforeScrollTop',beforeScrollTop);
    window.addEventListener("scroll", function() {
      var afterScrollTop = document.documentElement.scrollTop,
        delta = afterScrollTop - beforeScrollTop;
      console.log('beforeScrollTop',beforeScrollTop);
      console.log('afterScrollTop',afterScrollTop);
      if( delta === 0 ) return false;
      fn( delta > 0 ? "down" : "up" );
      beforeScrollTop = afterScrollTop;
    }, false);
  }

  scroll(function(direction) { console.log(direction) });
</script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
使用Canvas操作像素的方法
Jun 14 #HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 #HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 #HTML / CSS
详解Canvas事件绑定
Jun 27 #HTML / CSS
Html5剪切板功能的实现代码
Jun 29 #HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 #HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 #HTML / CSS
You might like
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python 用struct模块解决黏包问题
2020/11/07 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
税务会计岗位职责
2014/02/18 职场文书
保研专家推荐信范文
2015/03/25 职场文书
统招统分证明
2015/06/23 职场文书
七年级语文教学反思
2016/03/03 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Python Flask实现进度条
2022/05/11 Python