一、触摸事件
ontouchstart
ontouchmove
ontouchend
ontouchcancel目前移动端浏览器均支持这4个触摸事件,包括IE。由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1
/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组,其中一个元素代表同一时刻的一个触控点,从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控,所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标,等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};
二、手势事件手势是指利用多点触控进行旋转、拉伸等操作,例如图片、网页的放大、旋转。需要两个或以上的手指同时触摸时才会触发手势事件。关于缩放我们需要注意的一点是元素的位置坐标:我们通常使用offsetX、getBoundingClientRect等方法获取元素的位置坐标,但在手机浏览器中页面经常会在使用中被缩放,那缩放后的元素坐标会改变吗?答案是有所差异。用一个情景来说明这个问题:页面A加载完成后,JavaScript获取到该元素在document中的坐标为(100,100),接着用户放大了页面,此时用JavaScript再次输出元素坐标,依然还是(100,100),但该元素在屏幕上的响应区域会根据缩放比例产生偏移。你可以打开那个打砖块游戏demo,等页面完全加载完成后,再放大,此时你会发现即使手指触摸在“touch here”区域外部,也可以控制到球板,因为区域发生了偏移。除非页面刷新或者恢复缩放,否则偏移量将一直存在。1
/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例,小于1是缩小,大于1是放大,原始为1
var scale = e.scale;
//rotation代表旋转手势的角度,值区间[0,360],正值顺时针旋转,负值逆时针
var angle = e.rotation;
};
三、重力感应重力感应较简单,只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下:
0:与页面首次加载时的方向一致
-90:相对原始方向顺时针转了90°
180:转了180°
90:逆时针转了90°据我测试,Android2.1尚未支持重力感应。以上即目前的触屏事件,这些事件尚未并入标准,但已被广泛使用。本人Android2.1,未在其他环境下测试。
分享到:
相关推荐
主要介绍了触屏中的JavaScript事件,实例分析了触屏事件的种类、原理与相关使用技巧,需要的朋友可以参考下
javascript实现手机触摸屏左右(上下)滚动(javascript感知滑屏方向)
ABB触摸屏CP600使用不同端口时的接线示意图pdf,ABB触摸屏CP600使用不同端口时的接线示意图:CP600 系列触摸屏至少拥有一个串口和至少一个以太网口,两个串口具有相同的功能,都支持RS-232 和RS-485;CP600 触摸屏只...
一个JavaScript库,用于支持触摸屏设备上的触摸(尤其是多点触摸)手势_JavaScript_下载.zip
JavaScript中BOM和DOM详解 目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...
javascript插件制作汽车手动触屏旋转 javascript插件制作汽车手动触屏旋转
javascript 屏幕 VirtualKeyboard 软键盘 php 键盘 触摸屏
flash+javascript制作的触摸屏介绍系统,界面很炫。 打开exe即可看到效果。alt+x关闭系统。 内容仅供学习交流之用。
主要为大家详细介绍了javascript移动开发中touch触摸事件,感兴趣的小伙伴们可以参考一下
触摸事件(塔德斯·费伊萨) - 提供通常用于触摸屏设备的 swipe、swipeLeft、swipeRight、swipeUp、swipeDown、longTap、singleTap 和 doubleTap JavaScript 事件。 - 使用触摸设备(例如手机、平板电脑...)或 ...
JavaScript应用实例-禁止触摸手机屏幕.js
为学习javascript, html5而写。仅供大家参考。
本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta ...
本文实例为大家分享了javascript实现移动端触屏拖拽的具体代码,供大家参考,具体内容如下 HTML: <body> </body> CSS: <style media=screen> * { margin: 0; padding: 0; } html,body ...
Swiper.js 一个JavaScript库,用于触摸屏的轻扫/轻拂检测。 当前版本是0.3。职能 var swipe = new Swiper(dom_element);// Add event listners.swipe.start();// Remove event listners.swipe.stop();// Define ...
部分事件对象如下:touches 正在触摸屏幕的所有手指的一个列表当我们手指离开屏幕就没有了targetTouches 正在触摸当前DOM元素上的手指的一个列表
ABB触摸屏CP600配方手册pdf,ABB触摸屏CP600配方手册:本章的目的是描述Panel 600的JavaScript实现的接口。Panel 600 JavaScript是基于ECMAScript的编程语言,标准ECMA-262中定义的。
btt轻松管理JavaScript中的BetterTouchTool。开始吧有关btt.js请参见和 。关于该软件包是Web服务器API中内置的的便捷包装。 (通过 ) 该软件包将允许您使用JavaScript自动运行MacOS的计算机。 您将能够: 创建将在...
触屏手势库,基于Winter和Zepto.js完成_JavaScript_下载.zip
js软键盘,支持中英文切换、大小写、标点符号,可拖动显示位置,支持不同表单元素响应是否显示软键盘;内附demo示例。