WAP页面点击与hover延迟解决之道
2015-10-10 18:23
211 查看
最近一直在WAP端页面的开发,一直都知道wap端点击相关问题存在延迟。之前做的网页大部分使用a链接进行,一直未入此坑。
最近做的一个WAP网站,各种点击,hover事件,如果使用PC端网页的做法,直接使用js click事件与css中的hover伪类,视觉效果与用户体验很差。
click的坑:
存在延迟
移动端处理事件优先级别:
浏览器在触摸完毕后会检测连续触摸事件,判断是否需要执行放大缩小效果,最后才是click事件。点击延迟由此而生。
chrome浏览器下解决方法最简单粗暴:
width=device-width, 设置网页宽度为设备宽度
initial-scale=1, 初始缩放为1
maximum-scale=1, 最大缩放为1
user-scalable=no, 禁止缩放
但同样使用webkit内核的safri浏览器却不生效。
IE也是有自己的解决方法的:
其他浏览器只能依靠js代码来解决:
hover:
:hover样式不一定生效生效
由于手机浏览器并没有鼠标指针事件,w3c对此没有明文规范,各个浏览器对于hover的处理不尽相同。
有的浏览器:hover 会生效,但是当触摸移出元素后hover还是会生效,再次开始触摸点击会移除hover效果。
有的浏览器只有在A连接元素上hover才会生效。
当然会想到 :active 这个伪类,然而在绝大部分手机浏览器下,并没有什么卵用。直接不支持 ::active 伪类。
解决方法:
虽然手机浏览器中没有鼠标指针,但是有Touch事件。
css增加hover样式:
js添加hover
hover与click处理事件常常在一起使用,综合解决:
css代码:
js代码:
实际情况当然不会这么简单,扩展代码
css代码:
js代码
调用示例
上述小段代码即可解决大部分的点击与hover需求,并且代码库很小
说白了原理就是使用touch代替进行处理,触摸开始的时候添加hover样式,触摸结束移除hover样式;
完整代码下载: https://github.com/pyrinelaw/pFastCorres
demo:http://pyrinelaw.github.io/pFastCorres/
当然,如果只是单纯的需要解决延迟点击问题,网上已有成型的插件供使用
fastclick 其原理是使用事件委托在document节点添加touch检测。不过代码库稍稍有点臃肿。
如果使用了zepto.js,可以使用$.tap 方法进行click处理,缺点是存在点透问题,改写touch冒泡事件即可。
感谢阅读此份文稿
如需引用,请注明出处
关于作者请访问: https://github.com/pyrinelaw
作者:Petrus.Law
最近做的一个WAP网站,各种点击,hover事件,如果使用PC端网页的做法,直接使用js click事件与css中的hover伪类,视觉效果与用户体验很差。
click的坑:
存在延迟
移动端处理事件优先级别:
触摸事件 > 连续 > 点击事件 touch > douchtouch > click
浏览器在触摸完毕后会检测连续触摸事件,判断是否需要执行放大缩小效果,最后才是click事件。点击延迟由此而生。
chrome浏览器下解决方法最简单粗暴:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
width=device-width, 设置网页宽度为设备宽度
initial-scale=1, 初始缩放为1
maximum-scale=1, 最大缩放为1
user-scalable=no, 禁止缩放
但同样使用webkit内核的safri浏览器却不生效。
IE也是有自己的解决方法的:
target: { -ms-touch-action: none; /* IE10 */ touch-action: none; /* IE11 */ } /* 如果整个网页都不需要考虑放大缩小效果的话,直接附加在body上即可 */ body { -ms-touch-action: none; /* IE10 */ touch-action: none; /* IE11 */ }
其他浏览器只能依靠js代码来解决:
document.getElementById('target').addEventListener('touchend', function(){ /* 点击事件回调函数 */ }, false);
hover:
:hover样式不一定生效生效
由于手机浏览器并没有鼠标指针事件,w3c对此没有明文规范,各个浏览器对于hover的处理不尽相同。
有的浏览器:hover 会生效,但是当触摸移出元素后hover还是会生效,再次开始触摸点击会移除hover效果。
有的浏览器只有在A连接元素上hover才会生效。
当然会想到 :active 这个伪类,然而在绝大部分手机浏览器下,并没有什么卵用。直接不支持 ::active 伪类。
解决方法:
虽然手机浏览器中没有鼠标指针,但是有Touch事件。
css增加hover样式:
.target:hover, .target.hover { /* hover样式 */ }
js添加hover
var target= document.getElementById('id'); target.addEventListener(’touchstart’, function(){this.className = “hover”;}, false); target.addEventListener(’touchend’, function(){this.className = “”;}, false);
hover与click处理事件常常在一起使用,综合解决:
css代码:
.target:hover, .target.hover { /* hover样式 */ }
js代码:
var hoverClass = 'hoverClass'; // hover样式 var target = document.getElementById('target'); target.addEventListener(’touchstart’, function(){ this.className = hoverClass ; }, false); target.addEventListener(’touchend’, function(){ this.className = ""; /* 点击事件回调函数 */ // ... }, false);
实际情况当然不会这么简单,扩展代码
css代码:
.target:hover, .target.hover { /* hover样式 */ }
js代码
(function() { var pFastTouch = function(settings) { if(!document.querySelectorAll) return; // 不支持html5元素查询 if(!settings || !settings.selector) return; // 未设置选择器 settings.callbacks = settings.callbacks || {}; var els = document.querySelectorAll(settings.selector), hoverClass = settings.hoverClass, callbacks = settings.callbacks; var startCb = null, moveCb = null, endCb = null; /** * 触摸开始 */ if(hoverClass || callbacks.start){ startCb = function(event){ var el = event.target; if(hoverClass){ var className = el.className; className = (className == (undefined || '')) ? hoverClass : (className + ' '+hoverClass); el.className = className; } if(callbacks.start) callbacks.start.call(null, el, event); } for(var i=0; i<els.length; i++){ els[i].addEventListener('touchstart', startCb, settings.bubble || false); } } /** * 触摸中 */ if(callbacks.move){ moveCb = function(event){ callbacks.move.call(null, event.target, event); } for(var i=0; i<els.length; i++){ els[i].addEventListener('touchmove', moveCb, settings.bubble || false); } } /** * 触摸结束 */ if(hoverClass || callbacks.end){ endCb = function(event){ el = event.target; if(hoverClass){ var reg = new RegExp('(\\s|^)'+hoverClass+'(\\s|$)'); el.className = el.className.replace(reg, ' '); } if(callbacks.end) callbacks.end.call(null, el, event); } for(var i=0; i<els.length; i++){ els[i].addEventListener('touchend', endCb, settings.bubble || false); els[i].addEventListener('touchcancel', endCb, settings.bubble || false); } } var setDestory = function(el){ if(startCb) el.removeEventListener('touchstart', startCb, false); if(moveCb) el.removeEventListener('touchmove', moveCb, false); if(endCb) el.removeEventListener('touchend', endCb, false); if(endCb) el.removeEventListener('touchcancel', endCb, false); } /** * 销毁 */ var destory = function(){ for(var i=0; i<els.length; i++) setDestory(els[i]); } return { destory: destory }; } window.pFastCorres = function(settings){ return new pFastTouch(settings); } })()
调用示例
var touch = pFastCorres({ selector: '元素选择器', // 与jQuery元素选择器使用方法一致 hoverClass: 'hover样式', // 可不填 bubble: false, // 是否吞噬触摸事件,默认为false // 回调, 如果没有可以不填写 callbacks: { start: function(el, event){}, move: function(el, event){}, end: function(el, event){} } }); // 若需要销毁,调用销毁方法 // touch.destory();
上述小段代码即可解决大部分的点击与hover需求,并且代码库很小
说白了原理就是使用touch代替进行处理,触摸开始的时候添加hover样式,触摸结束移除hover样式;
完整代码下载: https://github.com/pyrinelaw/pFastCorres
demo:http://pyrinelaw.github.io/pFastCorres/
当然,如果只是单纯的需要解决延迟点击问题,网上已有成型的插件供使用
fastclick 其原理是使用事件委托在document节点添加touch检测。不过代码库稍稍有点臃肿。
如果使用了zepto.js,可以使用$.tap 方法进行click处理,缺点是存在点透问题,改写touch冒泡事件即可。
感谢阅读此份文稿
如需引用,请注明出处
关于作者请访问: https://github.com/pyrinelaw
作者:Petrus.Law
相关文章推荐
- sphinx在c#.net平台下使用(一)
- poj 2564 Edit Step Ladders TRIE树+dp求图中最长路
- hadoop2.2重新格式化namenode
- 地产IT人福利:帆软地产BI解决方案全解析
- 地产IT人福利:帆软地产BI解决方案全解析
- poj3026Borg Maze
- C语言:编写一个程序,它从标准输入(终端)读取C源代码,并验证所有的花括号都正确的成对出现
- Android 禁止屏幕旋转 和 旋转屏幕时保持Activity
- Linux chmod命令详解
- jenkins使用Git为源码管理(windows master && linux slave)
- 深入探索 JUnit 4
- 根据Item数动态设定ListView高度
- 7、one2many单向
- Android 源码获取——在Windows环境下通过Git得到Android源代码
- 发生xib文件关联不到.h文件时,可以尝试重新打开.h文件,再进行关联
- 通过zssh在服务器和本地之间上传和下载文件
- 排序算法——插入排序
- oracle创建用户
- OpenCV基本绘图
- 网络小白的自言自语