触屏中的JavaScript事件分析

本文实例讲述了触屏中的JavaScript事件。分享给大家供大家参考。具体分析如下：

一、触摸事件

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”区域外部，也可以控制到球板，因为区域发生了偏移。除非页面刷新或者恢复缩放，否则偏移量将一直存在。

/**
* 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，未在其他环境下测试。

PS：这里再为大家提供一个关于JS事件的在线工具，归纳总结了JS常用的事件类型与函数功能：

javascript事件与功能说明大全：

http://tools.jb51.net/table/javascript_event

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js完美的div拖拽实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • js实现touch移动触屏滑动事件

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发,这个好像比较少用 每个触摸事件被触发

  • js 表格排序(编辑+拖拽+缩放)

    Table body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ over

  • JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例

    本文实例讲述了JS+CSS实现仿触屏手机拨号盘界面及功能模拟的方法.分享给大家供大家参考.具体如下: 首先来看一下运行效果图: 具体实现代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top

  • js最简单的拖拽效果实现代码

    其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置). 本文讨论的重点不是iGoogle的拖放效果,那属于进阶篇,本文是拖拽的"第一阶",如题,实现最简单的拖拽. 这里的"最简单"即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似iGoogle的"drag

  • 基于JavaScript实现移动端TAB触屏切换效果

    基于JavaScript实现移动端TAB触屏切换效果

    展示效果图如下所示: 效果演示 源码下载 我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. HTML 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • javascript拖拽上传类库DropzoneJS使用方法

    用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

  • 触屏中的JavaScript事件分析

    本文实例讲述了触屏中的JavaScript事件.分享给大家供大家参考.具体分析如下: 一.触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1 实例如下: /** * onTouchEvent */ v

  • javascript移动设备Web开发中对touch事件的封装实例

    在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t

  • JavaScript中的模拟事件和自定义事件实例分析

    本文实例讲述了JavaScript中的模拟事件和自定义事件.分享给大家供大家参考,具体如下: 前面介绍了JavaScript中为事件指定处理程序的五种方式和JavaScript的事件对象event. 下面介绍JavaScript中的模拟事件和自定义事件. 1.DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串.在DOM2级中这

  • html5手机触屏touch事件介绍

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享. 今天为大家介绍的事件主要是触摸事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表. targe

  • JavaScript 事件冒泡应用实例分析

    JavaScript 事件冒泡应用实例分析

    然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的.本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项. 如果你对JavaScript事件冒泡还没有什么印象,不妨先看看我之前写的一篇博客<JavaScript事件冒泡简介及应用>.本文讲究实用,不在对JavaScript事件冒泡基础知识进行过多的阐述. 在文章开始之前,现在先看看下面这样一个需求:下面HTML假设描述的是一个WebGame项目包裹栏(玩过网游的人

  • 浅谈JavaScript事件绑定的常用方法及其优缺点分析

    传统方式  element.onclick = function(e){ // ... };  1.  传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很有帮组 2. 传统绑定的缺点 传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数.新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式  element.addEventListener('click'

  • javascript事件模型实例分析

    本文实例讲述了javascript事件模型的用法.分享给大家供大家参考.具体分析如下: 一.事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递 二.事件对象 在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件

  • JavaScript事件委托技术实例分析

    本文实例分析了JavaScript事件委托技术.分享给大家供大家参考.具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托: 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件委托技术利用了事件冒泡.只需指定一个事件处理程序. 我们可以为某个

  • JavaScript事件委托用法分析

    本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体分析如下: 一.点击页面任何部分触发事件 创建一个script1.js文件. 复制代码 代码如下: (function() {     eventUtility.addEvent(document, "click", function(evt) {         alert('hello');     }); }()); 页面部分. 复制代码 代码如下: <head> <meta http-e

随机推荐