正文 

当前位置： 首页 > java > java教程

移动端js触摸事件大全

viana37 viana37     2022-12-13     680

关键词：

一、手机上的触摸事件

基本事件：


touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

 

下面这个比较少用：

touchcancel  //触摸过程被系统取消时触发

每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：

 

touches         //位于屏幕上的所有手指的列表

targetTouches   //位于该元素上的所有手指的列表

changedTouches  //涉及当前事件的所有手指的列表


每个事件有列表，每个列表还有以下属性：

 

复制代码

其中坐标常用pageX,pageY：


pageX    //相对于页面的 X 坐标

pageY    //相对于页面的 Y 坐标

clientX  //相对于视区的 X 坐标

clientY  //相对于视区的 Y 坐标

screenX  //相对于屏幕的 X 坐标

screenY  //相对于屏幕的 Y 坐标

 

identifier // 当前触摸点的惟一编号

target   //手指所触摸的 DOM 元素


其他相关事件：

 

event.preventDefault（）   //阻止触摸时浏览器的缩放、滚动条滚动

var supportTouch = "createTouch" in document  //判断是否支持触摸事件


更多深入内容？点击：http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html

 

 

 

二、示例

 

以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：


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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 var  touchFunc =  function (obj,type,func)       //滑动范围在5x5内则做点击处理，s是开始，e是结束      var  init = x:5,y:5,sx:0,sy:0,ex:0,ey:0;      var  sTime = 0, eTime = 0;      type = type.toLowerCase();         obj.addEventListener( "touchstart" , function ()          sTime =  new  Date().getTime();          init.sx = event.targetTouches[0].pageX;          init.sy = event.targetTouches[0].pageY;          init.ex = init.sx;          init.ey = init.sy;          if (type.indexOf( "start" ) != -1) func();      ,  false );         obj.addEventListener( "touchmove" , function ()           event.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动          init.ex = event.targetTouches[0].pageX;          init.ey = event.targetTouches[0].pageY;          if (type.indexOf( "move" )!=-1) func();      ,  false );         obj.addEventListener( "touchend" , function ()           var  changeX = init.sx - init.ex;          var  changeY = init.sy - init.ey;          if (Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y)               //左右事件              if (changeX > 0)                   if (type.indexOf( "left" )!=-1) func();              查看详情

html5移动端触摸事件

一、移动端事件问题1.click事件300ms延迟问题2007年第一代iphone发布，移动端Safari首创双击缩放功能，原理是click一次后，经过300ms之后检测是否再有一次click，如果有就会缩放，如果没有则是一个click事件。所以cilck操作会有卡顿感... 查看详情

js之移动端特效一(代码片段)

一、触屏事件1.1、触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有独特的地方。比如触屏事件touch（也称触屏事件）,Android和IOS都... 查看详情

移动端触摸相关事件touchtapswipe

...定义及分类1.click事件单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms~300ms的延迟 2.touch类事件触摸事件，有touchstarttouchmovetouchendtouchcancel四种之分touchstart：手指触摸到屏幕会触发touchmove：当手指在屏幕上... 查看详情

移动端触摸事件介绍

BypublishingthisRecommendation,W3CexpectsthatthefunctionalityspecifiedinthisTouchInterfaceRecommendationwillnotbeaffectedbychangestoHTML5orWebIDLasthosespecificationsproceedtoRecommendation.TheWGhasco 查看详情

移动端tap事件的实现

参考技术A在移动端click事件会有300ms的延迟，所以不推荐使用解决此问题，可以使用fastclick.js去掉延迟或者zepto和jQuerymobile提供的tap事件代替click事件移动端拥有自己的三个基础触摸事件：touchstart、touchmove、touchend，而tap事件的本... 查看详情

移动端触摸事件

原生 ontouchstart ontouchmove ontouchend　　 obj.addEventListener(‘touchstart‘,start)     obj.addEventListener(‘touchmove‘,move)　　 obj.addEventListener(‘t 查看详情

移动端触摸事件ontouchstartontouchmoveontouchendontouchcancel

移动端触摸事件ontouchstart、ontouchmove、ontouchend、ontouchcancel来源 http://hi.baidu.com/study_sweet/item/fc6ac732a216dd8db711dba51、Touch事件简介pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmou 查看详情

移动端触摸（touch）事件(代码片段)

移动端时代已经到来，作为前端开发的我们没有理由也不应该坐井观天，而是勇敢地跳出心里的那口井，去拥抱蔚蓝的天空。该来的总会来，我们要做的就是接受未知的挑战。正如你所看到的，这是一篇关于移动端触摸事件的文... 查看详情

js移动端tap事件封装

这几天做项目，发现移动端需要触摸事件，而click肯定是不行的，于是我对tap事件封装进行了搜索，找到了一篇文章，原文地址如下：http://www.jb51.net/article/50663.htm，我对其中第一个封装加了一点东西，把它封装在一个函数里面，... 查看详情

js事件监听手机屏幕触摸事件touch

JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏... 查看详情

移动端触摸事件ontouchstartontouchmoveontouchendontouchcancel

...n、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分别对应了触屏开始、拖拽及完成 查看详情

html5移动端触摸事件

工作了近一个月了因为公司是主要偏向于移动端，开始不懂移动端事件一直用的click click在安卓端没有什么问题但在IOS端就有问题了点击之后会延迟半秒 多亏旁边大神指点原来 iOS上的Safari也支持click和mouseover等传统的... 查看详情

移动端触摸事件及对象

<!DOCTYPEhtml>　　<html>　　　　<head>　　　　　　<metacharset="utf-8">　　　　　　<metaname="viewport"content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>　　　　　　<title>&l 查看详情

html5移动端触摸滑动事件

以下代码经过测试 没有问题且可以循环滑动  <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metaname="renderer"content="webkit"><metahttp-equiv="X-UA-Compatible"cont 查看详情

移动端触摸事件ontouchstartontouchmoveontouchendontouchcancel[转]

转：http://www.cnblogs.com/irelands/p/3433628.html1、Touch事件简介pc上的web页面鼠标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouc 查看详情

移动端touch事件

在移动端页面开发时，常常会用到touch事件，比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。每个事件包含下面三个用于跟踪虎摸的属性：　　touches：表示当前跟踪的触摸操作的touch对象的数组。　　targetTouch... 查看详情

css笔记：移动端触摸事件-点击延迟的证明和“点穿”点穿-3.触摸动作(代码片段)

查看详情