浅谈移动端之touch事件--手指的滑动事件

原理：

  1. 当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；
  2. 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

具体代码如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

$("body").on("touchstart", function(e) {

    e.preventDefault();

    startX = e.originalEvent.changedTouches[0].pageX,

    startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove", function(e) {

    e.preventDefault();

    moveEndX = e.originalEvent.changedTouches[0].pageX,

    moveEndY = e.originalEvent.changedTouches[0].pageY,

    X = moveEndX - startX,

    Y = moveEndY - startY;

 

    if ( X > 0 ) {

        alert("left 2 right");

    }

    else if ( X < 0 ) {

        alert("right 2 left");

    }

    else if ( Y > 0) {

        alert("top 2 bottom");

    }

    else if ( Y < 0 ) {

        alert("bottom 2 top");

    }

    else{

        alert("just touch");

    }

});

总结：touchmove的最后坐标减去touchstart的起始坐标。

  1. X的结果如果正数，则说明手指是从左往右划动；
  2. X的结果如果负数，则说明手指是从右往左划动；
  3. Y的结果如果正数，则说明手指是从上往下划动；
  4. Y的结果如果负数，则说明手指是从下往上划动。

坑开始了……
理想很丰满，显示很骨感！在实际的操作中，手指的上下滑动很难做到直上直下，只要稍微有点斜，只要稍微有点斜，就会被X轴的判断先行接管，而与我们实际的操作意愿相背离。此时就需要添加特殊的判断技巧，代码如下：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

$("body").on("touchstart", function(e) {

    e.preventDefault();

    startX = e.originalEvent.changedTouches[0].pageX,

    startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchmove", function(e) {

    e.preventDefault();

    moveEndX = e.originalEvent.changedTouches[0].pageX,

    moveEndY = e.originalEvent.changedTouches[0].pageY,

    X = moveEndX - startX,

    Y = moveEndY - startY;

     

    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {

        alert("left 2 right");

    }

    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {

        alert("right 2 left");

    }

    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {

        alert("top 2 bottom");

    }

    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {

        alert("bottom 2 top");

    }

    else{

        alert("just touch");

    }

});

以上代码，在测试时仍不能达到预期的效果，此时要注意到一个事实--$(‘body‘).height = 0（此处是个大坑，但有时也不会出现，望大神指教）
故还应该在此基础上添加一下代码：


1

2

3

4

5

var windowHeight = $(window).height(),

          $body = $("body");

      // console.log($(window).height());

      // console.log($(‘body‘).height());

      $body.css("height", windowHeight);

到此，已实现了手机移动端手指的上滑、下滑、左滑和右滑操作。

时间： 2024-11-03 05:59:24

浅谈移动端之touch事件--手指的滑动事件的相关文章

touch移动触屏滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 四种touch事件 touchstart 当手指触摸到屏幕时触发,即使已经有一个手指放在了屏幕上也会触发. touchmove 当手指在屏幕上连续滑动时触发,在这个事件发生期间,调用preventDefault()可阻止滚动. touchend 当手指从屏幕上移开时触发

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

开园子啦（浅谈移动端以及h5的发展）

一.前言 一直以来都梦想着写几篇博客,忙于工作一直也没有抽出时间来写一下.看看大熊君.小v君等都在努力写博客,我这个不太善于言表的少年,也是在忍不住了.否则会被人家拉下更远.先简单介绍一下自己,目前我是一个前端工程师,就职于某化妆品电商,其实大家一猜就知道是哪个公司啦.就是股票跌得比较严重的公司,所以领导的火气多比较大.公司一直以来也比较忙,各种活动接踵而至,可就苦了我们这帮程序猿.废话不说,先聊聊打算写博客的内容.也希望大家关注.给我提多多意见,一起成长.一起学习. 二.关注的博客 目前比较关

浅谈移动端开发页面

之前介绍一篇文章是:响应式web实战总结 已经介绍了一些知识点,这里就不多介绍了:我们这边来了解下如何使用媒体查询写不同的css样式:针对响应式web设计开发,使用媒体查询来适应不同的手机屏幕样式开发时,我们需要写不同的样式,为此我们来分享下我个人开发响应式web页面的经验:针对目前手机的独立像素有320,360,384,400,还有iphone6+是414的独立像素,因此我们只需要针对目前这几种匹配即可:如下: 针对手机独立像素是360 ~399等屏幕的宽度 /* * 但是边距 字体大小等还是

浅谈移动端rem的用法

一 什么是rem? “font size of the root element 这是w3c的定义 也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位,大部份的默认字体单位是16px. 图片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html  二 简单应用. 既然确定在各个主流浏览器都能食用的话,我们就放心大胆在移动端进行开发了. 举个例子说明 html{ font-size

浅谈移动端中的视口（viewport）

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. 而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport).视觉视口(Visual Viewport)和理想视口(Ideal Viewport). 本文主要讨论移动端中的视口. 1. 基本概念 1.1 两种像素 像素是计算机屏幕中显示特定颜色的最小区域.屏幕中的像素越多,同一

浅谈移动端布局问题

移动端推广速度快,效果好,越来越多的企业,商家开始重视移动站的建设和移动页面(h5)的制作.随着移动页面的玩法越来越多,对前端技术的要求也会越来越高.选择合适的布局,是写好移动页面的第一步.今天我们就来谈谈移动端的布局问题.为什么移动端布局如此混乱?这是由多方的原因造成的. css这套技术系统本身十分混乱,基本上可以说毫无规律可言,依赖于技术人员的熟练程度而不是逻辑更多一些:2．css历经了多个时代的升级,每一次升级之后,新的技术标准和旧的基本上没有任何关联.比如:table布局,div+css

[转] 浅谈移动端设备标识码：DeviceID、IMEI、IDFA、UDID和UUID

[心路历程] 最近刚好在思考工作中统计数据所用的标识码产生的数据误差到底有多大,借此机会几番搜索资料+请教大神,整理出此文. 因为自己是产品经理,所以出发点是整理知识点.理解个大概.知道什么不能用.什么标识是靠谱的,并不研究太深入.毕竟非专业开发,有时候若了解知识点太深入,反倒会更困惑(关联知识点太多).即使研究清楚了,工作中碰到和自己研究相悖的情况,也不好丢个文档告诉开发应该怎么做(除非很熟,但次数多了也伤感情). 此外,不同公司.不同开发可能对同一个词的释义/实现方式有略微不同,但基本上是这

浅谈移动端过长文本溢出显示省略号的实现方案

本文首发于 vivo互联网技术 微信公众号? 链接: https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者:何彦军 目前在移动端开发的展示界面中,如果一段文本的数量过长,受限于屏幕的宽高等因素,有可能不能完全显示,这个时候就会把溢出的文本显示成省略号. 最近就亲身经历了一系列类似的需求,于是这里做个总结和记录. 首先一个最基本的需求就是当文本超过一行最大宽度时,超出的部分变为省略号,如下图所示. 这个功能比较基础,只用css就可以实现,如下图所