移动端JS 触摸事件基础

一、手机上的触摸事件

基本事件:

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

二、示例

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

复制代码

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();

}else{

if(type.indexOf("right")!=-1) func();

}

}

else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){

//上下事件

if(changeY > 0) {

if(type.indexOf("top")!=-1) func();

}else{

if(type.indexOf("down")!=-1) func();

}

}

else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){

eTime = new Date().getTime();

//点击事件,此处根据时间差细分下

if((eTime - sTime) > 300) {

if(type.indexOf("long")!=-1) func(); //长按

}

else {

if(type.indexOf("click")!=-1) func(); //当点击处理

}

}

if(type.indexOf("end")!=-1) func();

}, false);

};

时间: 2024-08-07 05:00:10

移动端JS 触摸事件基础的相关文章

移动端js触摸事件大全

一.手机上的触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这个比较少用: touchcancel  //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯: touches         //位于屏幕上的所有手指的列表 targetTouches   //位于该元素上的所有手指的列表 change

JS—触摸事件、手势事件

JS-触摸事件.手势事件 dbclick触屏设备不支持双击事件.双击浏览器窗口,会放大画面.可以通过在head标签内加上这么一行: <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 可以实现,我们编写的页面不会随着用的手势而放大缩小.关于meta标签,我还没有研究过,罪过啊. mouse在触屏上

学习记录 -- 移动端的触摸事件

移动端的触摸事件分为三个 1.touchstart 手指刚放上添加事件的元素时触发 2.touchmove   手指在添加事件的元素上移动时触发 3.touchend 手指在添加事件的元素上离开时触发 每个事件都包含三个事件属性 a.touches 正在触摸屏幕的所有手指的一个列表 b.targetTouches  正在触摸当前DOM元素上的手指上的一个列表 c.changedTouches    涉及当前事件的手指的一个列表 原文地址:https://www.cnblogs.com/hros/

移动端常用触摸事件以及常用坐标

一.触摸事件 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时触发 下面这个比较少用: touchcancel  //触摸过程被系统取消时触发 每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯: touches         //位于屏幕上的所有手指的列表 targetTouches   //位于该元素上的所有手指的列表 changedTou

Touch事件 移动端touch触摸事件

<!-- HTML5 --> <!DOCTYPE html> <html> <head> <title>TouchEvent测试</title> <meta charset="gbk"> </head> <body> <h2>TouchEvent测试</h2> <br /> <div id="version" styl

js触摸事件详细解读

本文来自火狐浏览器官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events 触摸事件(touch event)可响应用户手指(或触控笔)对屏幕或者触控板操作,给基于触控的用户界面提供了可靠支持. 触摸事件接口是较为底层的 API,可为特定程序提供多点触控交互(比如双指手势)的支持.多点触控交互开始于一个手指(或触控笔)开始接触设备平面的时刻.随后其他手指也可触摸设备表面,并随意进行划动.当所有手指离开设备平面时,交互结束

js 触摸事件 touch

先上实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>touch</title> <style t

移动端二三事【二】:移动端触摸事件点透及多种解决方案。

大家都知道的少说,多分享一些干货. 一.首先说移动端的三大主要事件: 1.手指按下: ontouchstart2.手指移动:ontouchmove3.手指抬起 ontouchend *使用移动端事件时,为尽可能地保证兼容性与调试时的友好性,尽可能用事件绑定的方式.例如: /* 注意: 在移动端开发的时候,浏览器的模拟器时好时坏,一般不用on的方式绑定事件函数,要用事件绑定的方式(addEventListener). */ //用以下方式浏览器的移动端模拟器可能会无法识别事件 var div =

iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

-- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事件(手势操作).运动事件.远程控制事件等展开学习: iOS事件简介 触摸事件 手势识别 运动事件 远程控制事件 iOS事件 在iOS中事件分为三类: 触摸事件:通过触摸.手势进行触发(例如手指点击.缩放) 运动事件:通过加速器进行触发(例如手机晃动) 远程控制事件:通过其他远程设备触发(例如耳机控制