移动端开发touchstart，touchmove，touchend事件详解使用

页面使用到了触摸事件"touchstart"，“touchmove”，“touchend”。需求：当你手指接触到屏幕并向左滑动时，被滑动的服务商信息开始向左滑动同时出现"编辑"和"停用"操作按钮。若继续用手指向右滑动，那么就会隐藏"编辑"和"停用"按钮，回到一开始的正常状态。下图展示了向左滑动和向右滑动产生的效果。

从一开始到左滑动完成：

从左滑动完成开始向右滑动知道完成。

触摸事件（touch Events）
　　　　touchstart,touchmove,touchend事件都有13个事件属性，具体可以参考MDN上的解释（在打开的MDN网页上，快捷键ctrl+F，输入touchstart即可找到触摸事件列表），我就对我们经常需要使用的几个事件属性进行解释。

target属性：触发事件的DOM元素。 type属性：事件类型。 bubbles属性：是否冒泡。 cancelable属性：是否阻止浏览器的默认行为。

重点说明touches, targetTouches, changedTouches这三个事件属性,这三个都是touchList类型,touches事件属性：触摸当前接触面的每一个触点列表。targetTouches属性：接触点的每一个接触点的列表，并在当前事件的目标元素上启动。changedTouches属性：每一个接触点的清单，这有助于事件。在控制台输出这三个事件属性：

1 /* 这三个都是toucheList类型输出的内容也是一样的 */
2 console.log(e.touches);
3 console.log(e.targetTouches);
4 console.log(e.changedTouches);　　　　　　
　如下图，我们需要的内容在Touch对象中。同时也在控制台输出Ttouch的值:
　// 我们发现这三者的值仍然一样
console.log(e.touches[0]);
console.log(e.targetTouches[0]);
console.log(e.changedTouches[0]);
　　好吧，三者的值还是一样我们展开其中的一个看清里面的全部：

里面的内容我们大部分我们都认识，clientX:触摸目标在视口中的x坐标。clientY：触摸目标在视口中的y坐标。identifier:标识触摸的唯一ID。pageX:触摸目标在页面中的x坐标。pageY:触摸目标在页面中的y坐标。screnX:触摸目标在屏幕中的x左边。screenY:触摸目标在屏幕中的y左边。target：触摸目标的DOM节点目标。　
　　　
　　　项目应用
　　　　下面我就讲讲在项目中的应用和一些思路。首先给需要的滚动的元素添加样式：　
　　　　1 /* 左移动2.28rem /
2 .scrollLeft {
3 -webkit-transform: translateX(-2.28rem);
4 -moz-transform: translateX(-2.28rem);
5 -ms-transform: translateX(-2.28rem);
6 transform: translateX(-2.28rem);
7 }
　　　　
　　　　JS代码如下：
　　　　
1 / 添加事件 */
2 for(var i = 0; i < $(".merchant > li").length; i++) {
3 $(".merchant > li")[i].addEventListener(‘touchstart’, touchStart); //触摸开始
4 $(".merchant > li")[i].addEventListener(‘touchmove’, touchMove); //触摸移动
5 $(".merchant > li")[i].addEventListener(‘touchend’, function() { //触摸结束
6 isMove = false;
7 });
8 }
9 //滑动开始
10 function touchStart(e) {
11 isMove = true;
12 startX = e.touches[0].clientX; //触摸起始X位置
13 }
14 //滑动时添加样式
15 function touchMove(e) {
16 if(isMove) {
17 var moveX = e.touches[0].clientX - startX;//触摸滑动距离
18 if(moveX < -25) { //向左滑动
19 e.preventDefault(); //浏览器不要执行与事件关联的默认动作
20 //清除其他元素的类名，被滑动的元素添加scrollLeft类名
21 } else if(moveX > 25) { //向右滑动
22 e.preventDefault(); //浏览器不要执行与事件关联的默认动作
23 //被滑动的滑动的元素清除scrollLeft类名
24 }
25 }
26 }
这样效果就实现了，
注意几点：①禁止缩放：缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：content=“width=device-width, initial-scale=1.0, user-scalable=no”> 。②禁止滚动：一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。
document.body.addEventListener(‘touchmove’, function(event) {
　　　　event.preventDefault();
}, false);

移动端开发touchstart，touchmove，touchend事件详解使用相关推荐

移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
移动端开发touchstart，touchmove，touchend事件详解和项目
移动端开发touchstart,touchmove,touchend事件详解和项目最近在做移动端的开发,在一个"服务商管理"页面使用到了触摸事件"touchstart& ...
移动端开发四种适配方案详解
web移动端开发 0.思维导图 1.前端开发常用单位 2.视口 2.1 视口定义 2.2 移动端视口宽度980 2.3 设置移动端不自动缩放网页尺寸 3.移动端常见适配方案 1.媒体查询@media ...
WP7开发—Silverlight多点触摸事件详解【含Demo代码】
最近在学习WP7的Silverlight编程,就把学习到知识点整理为日志,方便自己理解深刻点,也作为笔记和备忘,如有不合理或者错误之处,还恳请指正. WP7的支持多点触摸,有两种不同的编程模式: 1. ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
html5触屏滑动事件,HTML5的touch事件详解
原标题:HTML5的touch事件详解 HTML5中新添加了很多事件,比较常看到的是touch事件,下面来详解下html5中的触摸touch事件. touchstart:触摸开始的时候触发touchm ...
微信小程序开发【六】-- wxss详解
系列文章目录微信小程序开发[一]-- 初识小程序传送门微信小程序开发[二]-- 小程序入门传送门微信小程序开发[三]-- 项目结构概述传送门微信小程序开发[四]-- 配置详解传送门微 ...
iOS 开发：『Runtime』详解（二）Method Swizzling
本文用来介绍 iOS 开发中『Runtime』中的黑魔法Method Swizzling. 通过本文,您将了解到: Method Swizzling(动态方法交换)简介 Method Swizzlin ...

移动端开发touchstart，touchmove，touchend事件详解使用

移动端开发touchstart，touchmove，touchend事件详解使用相关推荐

最新文章

热门文章