1、Touch事件简介

pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如 iphone、ipod  Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。
当按下手指时,触发ontouchstart;
当移动手指时,触发ontouchmove;
当移走手指时,触发ontouchend。
当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
 
2、Touch事件与Mouse事件的出发关系
在触屏操作后,手指提起的一刹那(即发生ontouchend后),系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事 件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会 触发上一个事件的mouseout事件。

移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel的更多相关文章

  1. 移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel[转]

    转:http://www.cnblogs.com/irelands/p/3433628.html 1.Touch事件简介pc上的web页面鼠 标会产生onmousedown.onmouseup.onm ...

  2. HTML5移动端触摸事件

    一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如 ...

  3. js 处理移动端触摸事件

    在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的 ...

  4. H5移动端触摸事件:touchstart、touchend、touchmove

    第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1 ...

  5. 移动端-js触摸事件

    开发者工具 在移动开发中,一种较为容易的做法是,先在桌面上开始原型设计,然后再在打算要支持的设备上处理移动特有的部分.多点触摸正是难以在PC上进行测试的那些功能之一,因为大部分的PC都没有触摸输入. ...

  6. 移动端触摸、点击事件优化(fastclick源码学习)

    移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...

  7. 2014-08-28——移动端,触摸事件 touchstart、touchmove、touchend、touchcancel

    1.Touch事件简介在移动终端上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事 ...

  8. 移动端触摸(touch)事件

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

  9. 移动端click事件300ms延迟

    移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...

随机推荐

  1. 创业方向:O2O及移动社交 from 沈博阳

    十个最大的互联网公司,六个在美国,四个在中国 中国创业的特殊 市场巨大self-contained,做足中国市场就很够 ... ... 监管   领导力,人的要求 之前成功带领过团队 有海外的工作经历 ...

  2. 如何将U盘内文件拷入VMware Linux CentOS6.5虚拟机

    之前在Linux CentOS下安装Oracle这篇随笔中我提到要将下载到的安装文件解压缩 那么,问题来了! 如何把下载到的文件拷入虚拟机中呢? 我是这样做的: 1.将下载到的文件拷入U盘 2.以ro ...

  3. 我的jQuery源码读后感-jquery1.11.x 集成了 AMD

    jquery1.11.x 集成了 AMD AMD 加入到了 jQuery, jQuery 把源码切分成各个逻辑模块. ready 整合成依赖 Deferred 的模块. 有些模块被切分成一些更加利于维 ...

  4. Python中的dict和set

    1.dict定义: Python写一个dict如下: >>> d = {'Michael': 95, 'Bob': 75, 'Tracy': 85} >>> d[' ...

  5. ZeroMQ接口函数之 :zmq_msg_more - 指出是不是还有更多的消息部分可以接收

    ZeroMQ 官方地址 :http://api.zeromq.org/4-2:zmq_msg_more zmq_msg_more(3) ØMQ Manual - ØMQ/3.2.5 Name zmq_ ...

  6. Bigtable 论文 阅读笔记 - 原理部分

    不支持markdown,桑心.更好的阅读体验请看:Github/Bigtable.md Paper: Google Bigtable paper Notes author: Lhfcws Wu Tim ...

  7. Meteor 学习

    官方网站 https://www.meteor.com/ 官方API手册 https://guide.meteor.com/ http://docs.meteor.com/ 中文网站 http://c ...

  8. Moses 安装

    参考:Moses相关介绍与安装简介 http://www.52nlp.cn/moses-introduction 一.Moses简介 http://www.52nlp.cn/moses-introdu ...

  9. WPF中UserControl和DataTemplate

    最新更新: http://denghejun.github.io 前言 前言总是留给我说一些无关主题的言论,WPF作为全新Microsoft桌面或web应用程序显示技术框架, 从08年开始,一直到现在 ...

  10. 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-1 前言

    视频简介: 该视频介绍收到iCore3应用开发平台后如何获取出厂代码,以 及如何下载出厂代码到应用开发平台中. 源视频包下载地址: http://pan.baidu.com/s/1nuUZW17   ...