移动端 Touch 事件

在移动端页面开发时,常常会用到touch事件,比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。

每个事件包含下面三个用于跟踪虎摸的属性:

  touches:表示当前跟踪的触摸操作的touch对象的数组。

  targetTouches:特定于事件目标的Touch对象的数组。

  changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个touch事件包含下面的属性:

  clientX:触摸目标在视口中的x坐标。

  clientY:触摸目标在视口中的y坐标。

  identifier:标识触摸的唯一ID。

  pageX:触摸目标在页面中的x坐标。

  pageY:触摸目标在页面中的y坐标。

  screenX:触摸目标在屏幕中的x坐标。

  screenY:触摸目标在屏幕中的y坐标。

  target:触摸的DOM节点目标。

例如:

$(document).on(‘touchstart‘,function(e){alert("开始滑动(" + e.touches[0].clientX + "," + e.touches[0].clientY + ")")});
$(document).on(‘touchmove‘,function(e){alert("滑动中(" + e.changeTouches[0].clientX + "," + e.changeTouches[0].clientY + ")")});
$(document).on(‘touchend‘,function(e){alert("滑动结束(" + e.touches[0].clientX + "," + e.touches[0].clientY + ")")})

  

时间: 2024-10-11 17:18:30

移动端 Touch 事件的相关文章

H5案例分享:移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向 方法一 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

移动端touch事件的使用

一.支持webkit的touch事件 pc上的web页面鼠标会产生 iphone.ipod  Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 1.touchstart--当手指触碰屏幕时候发生.不管当前有多少只手指 2.touchmove--当手指在屏幕上滑动时连续触发.通常我们再滑屏页面,会调用event的preventDefault()可以阻

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是 主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

移动端touch事件 || 上拉加载更多

前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉 实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象.(ps:当然, 我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能. 备注:文章最后会加上为实现这个功能我找的一些插件 了解touch事件 在应用touch事件实现上拉加

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: 1 //获取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //给元素绑定监听事件 个人习惯把监听事件写在一块 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSect

web移动端touch事件

1.移动端与pc端的区别 移动端没有鼠标,自然也没有鼠标事件.所以onmousedown之类的事件监听在移动端时无效的. 移动端为了响应双击事件,onclick事件有300ms的延迟,因为要看看接下来的300ms有没有再次点击,有的话视为双击,没有的话视为单击. 延迟300ms只是理论上,实际上每台手机上这个延迟可能会不同,下面的代码可以测试当前手机上onclick事件的延迟 <script> var now document.ontouchstart = function(){ // 返回

移动端touch事件滚动

本来想用在北京欢乐谷手机上用touch事件来模拟局部左右内容滚动里,但在touchmove上下滚动时由于禁止了默认事件而body滚动条不能滚动,虽然可以根据touchmove的坐标来判断方向,但体验效果不理想. 后来在查询相关资料后原来可以直接在css中使用overflow:auto;出来的滚动条用CSS3的-wekit-scrollbar{display:none}来隐藏; *拓展*::-webkit-scrollbar 滚动条整体部分*::-webkit-scrollbar-thumb 滚动

移动端--touch事件与点透问题

也来说说touch事件与点击穿透问题: http://blog.csdn.net/alex8046/article/details/52299785

移动端Touch事件

案例1: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 6 <title>Test Ta