05.触屏事

事件类型

touchstart: 手指触摸屏幕时触发

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

touchend: 手指离开屏幕时触发

TouchEvent对象

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

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

changedTouches：touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点

注：没有对比出touches同targetTouches的差异，推荐使用targetTouches

Touch对象

clientX/Y 手指相对于layout viewport的水平/垂直像素距离

pageX/Y 手指相对于layout viewport的水平/垂直像素距离（含滚动）

screenX/Y 手指相对于layout viewport的水平/垂直像素距离（含滚动）

（未设置viewport时，screenX/Y在Webview中不正确）

target 手指最初与屏幕接触时的元素

移动开发通常会设置<meta name="viewport" content="width=device-width, initial-scale=1">，这时这三对坐标值是完全一样的。

click延时

早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。用触屏事件可以解决这个问题

手势封装

1、tap检测接触和离开屏幕的距离来实现

2、drag跟踪手指移动位置，进而设置元素定位坐标

3、swipe 判断手指滑动的方向

zepto.js

zeptojs为我们封装了常的触屏事件，需要touch模块支持，默认没有构建此模，我们可以自定义构建。

1、安装Nodejs环境

2、下载zepto.js

3、解压缩

4、cmd命令行进入解压缩后的目录

5、执行npm install 命令

6、编辑make文件，添加自定义模块并保存，如下图

7、然后执行命令 npm run-script dist

8、查看目录dist即构建好的zepto.js

原文地址：https://www.cnblogs.com/CGWTQ/p/10809744.html

时间： 2024-11-01 20:28:30

05.触屏事的相关文章

jQuery触屏插件：Tap 代码

jQuery触屏插件:Tap,使用方法非常简单,例:$("#domid").tap(function(){ alert("You tapped me! -- by"+this.innerText);});依赖jquery 1.7+ 01$.fn.tap = function(fn){02 var collection = this,03 isTouch = "ontouchend" in document.createElement("

安卓使用Root权限实现后台模拟全局按键、触屏事件方法（类似按键精灵）

继续在网上搜索安卓按键模拟(其实那时都不知道用什么关键字好了,能想到的关键字都用遍了,但是搜索出来的结果,都是之前提到的那几个依赖源码环境和系统权限的方案).发现有很多介绍ADB调试,向手机发送按键事件的文章.刚好之前做过在Root权限下,用Java调用安卓底层的Linux Shell,然后执行pm指令进行APK的安装卸载.这时我突发奇想,能否用Shell调用ADB指令呢? 于是就进行了尝试,使用Java执行Runtime.getRuntime().exec(“su”).getOutputStr

iphone、ipod Touch、ipad触屏时的js事件

1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 iphone.ipod Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 当按下手指时,触发ontouchstart: 当移动手指时,触发ontouchmov

转:Android随笔之——使用Root权限实现后台模拟全局按键、触屏事件方法（类似按键精灵）

本文转载自CSDN的jzj1993,原文连接:http://blog.csdn.net/jzj1993/article/details/39158865 有时我们需要使用安卓实现在后台模拟系统按键,比如对音量进行调节(模拟音量键),关闭前台正在运行的App(模拟返回键),或者模拟触屏事件.但是对于原生安卓系统而言,后台进程关闭前台进程,甚至模拟用户事件,进而操控整个系统,是不符合系统安全原则的,如果有这样的漏洞被病毒或恶意软件所利用,会非常危险. 由于一些特殊原因,我恰巧需要实现这样的功能,而又

Hammer.js移动端触屏框架的使用

hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8

联想的投影手机可投射触屏到任何表面

联想的投影手机可投射触屏到任何表面内置投影仪的智能机--好吧,真的只有两款三星出品的--到目前为止都没有真正大受欢迎,但是联想认为它最终找到了这种组合正确的用例:投射触屏或者虚拟键盘到你的桌面.今天在联想技术世界会议中宣布的是Smart Cast,世界上第一款智能机,与现有的pico投影仪的DLP技术相对,内置集成免对焦激光投影仪.除了通常的墙壁投射模式以外,还有一个"表面模式",要求扭转顶部的投影仪镜头(以完成反射),使用支撑架支撑起手机,然后在你面前,你将会拥有一个投射触屏--可

移动端项目添加触屏 swipe事件[记录]

avalon 触屏事件 tap, longtap, doubletap swipe, swipeleft, swiperight,swipedown,swipeup pinch, pinchstart,pinchend,pinchin,pinchout drag,dragstart,dragend, rotate,rotatestart,rotateend 移动端触屏事件添加测试 (https://segmentfault.com/a/1190000006012676) 挑选用到的模块加

触屏事件

iphone ipad开发: 关于触屏事件的一些操作 [cpp] view plaincopyprint? //轻击: //需要在你的ViewController里重写几个方法: //开始触摸的方法 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { messageLabel.text = @”Touches Began”; [self updateLabelsFromTouches:touches]; } //触

zTouch-移动端触屏开发利器(zepto touch扩展)

* Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版本的touch.js模块引入使用后会导致页面很卡的情况,所以开发了一个新的扩展插件来替换其touch.js.已经过Android/ios测试. github* zTouch特点: zTouch.js只包含核心功能函数,不包含任何效果,简洁轻巧; 提供丰富的回调参数,可由用户自定义扩展效果(可参