HTML5移动端触摸事件

工作了近一个月了 因为公司是主要偏向于移动端，开始不懂移动端事件 一直用的click  click在安卓端没有什么问题 但在IOS端就有问题了点击之后会延迟半秒  多亏旁边大神指点 原来  iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和mouseover，因为这两个事件是为了支持鼠标点击而设计出来的。Click事件在iOS上会有半秒左右的延迟，原因是iOS要highlight接收到click的element。而mouseover/out等事件则会被手指的点击触发。所以，在iOS上，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级的Gesture事件，能让你的网页交互起来像native应用一样。以下是四大Touch事件。

touchstart:  // 手指放到屏幕上的时候触发
touchmove:  // 手指在屏幕上移动的时候触发
touchend:  // 手指从屏幕上拿起的时候触发
touchcancel:  // 系统取消touch事件的时候触发。至于系统什么时候会取消 不知道。。

touch属性

client / clientY：// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY：// 触摸点相对于页面的位置
screenX /screenY：//触摸点相对于屏幕的位置
identifier： // touch对象的unique ID

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——by.笑花大王

时间： 2024-11-16 07:12:35

HTML5移动端触摸事件的相关文章

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

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

touchSwipe移动端触摸事件

今天分享一款很棒的插件touchSwipe,估计很多朋友都在找手机全屏滚动的效果,因为好多企业的微官网是或是专题都在用这样的效果,那么今天touchSwipe 1.6是最新的专门为移动设备设计的jquery插件,如:Ipad,苹果.安卓,当然PC上也是可以用的,嘻嘻.插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件,因此插件可以实现滑动滚屏.缩放等效果.本实例主讲滚屏效果,相了解缩放功能的请参考官方文档. 特点: 1.监听滑动的4个方向:上.下.左.右: 2.监听多个手指

移动端触摸事件 【转】

触摸事件 三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:     1. touchstart:手指放在一个DOM元素上.     2. touchmove:手指拖曳一个DOM元素.     3. touchend:手指从一个DOM元素上移开.     每个触摸事件都包括了三个触摸列表:     1. touches:当前位于屏幕上的所有手指的一个列表.     2. targetTouches:位于当前DOM元素上的手指的一个列表. 3. changedTouches:涉及当前事件的手

Html5 移动端 触摸滑动事件

以下代码经过测试  没有问题 且可以循环滑动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chr

js 处理移动端触摸事件

在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的效果,例如我们只需知道滑动的距离,向左还是向右,我们可以自己写一些代码来处理touch事件: 以下代码,只在触摸情况下支持,电脑需要chrome模拟手机: 可以改造成自己需要的效果: <!doctype html> <html> <head> <meta charse

移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

http://www.cnblogs.com/foolisher/p/5412723.html http://blog.csdn.net/b7995547/article/details/48951761 http://www.cnblogs.com/koukouyifan/p/4066567.html css device-width如何在js中获取 0,js判断是手机还是pc: function IsPC() { var userAgentInfo = navigator.userAgent

移动端触摸事件

原生  ontouchstart  ontouchmove  ontouchend  obj.addEventListener('touchstart',start) obj.addEventListener('touchmove',move)  obj.addEventListener('touchend',end <a>点击我</a> <div>abc</div> div{position:absolute;left:0;top:0;background

移动端触摸事件介绍

By publishing this Recommendation, W3C expects that the functionality specified in this Touch Interface Recommendation will not be affected by changes to HTML5 or Web IDL as those specifications proceed to Recommendation. The WG has completed and app

H5移动端触摸事件：touchstart、touchend、touchmove

第一部分代码事例: <html><head> <meta charset="utf-8"> <style> #main,#main1{ width:500px; height:500px; border:1px solid red; } </style> <script type="text/javascript"> function load (){ var oInp = document.g