WAP页面点击与hover延迟解决之道

发表于 | 分类于 |

最近一直在WAP端页面的开发，一直都知道wap端点击相关问题存在延迟。之前做的网页大部分使用a链接进行，一直未入此坑。
最近做的一个WAP网站，各种点击，hover事件，如果使用PC端网页的做法,直接使用js click事件与css中的hover伪类。
视觉效果与用户体验很差。

click的坑:

存在延迟

移动端处理事件优先级别: 

1
2
// 触摸事件 > 连续 > 点击事件
touch > douchtouch > click

浏览器在触摸完毕后会检测连续触摸事件，判断是否需要执行放大缩小效果，最后才是click事件。点击延迟由此而生。

chrome浏览器下解决方法最简单粗暴:

1
<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也是有自己的解决方法的:

1
2
3
4
target: {
    -ms-touch-action: none; /* IE10 */ 
    touch-action: none;     /* IE11 */
}

如果整个网页都不需要考虑放大缩小效果的话，直接附加在body上即可

1
2
3
4
body {
    -ms-touch-action: none; /* IE10 */ 
    touch-action: none;     /* IE11 */
}

其他浏览器只能依靠js代码来解决:

1
2
3
document.getElementById('target').addEventListener('touchend', function(){ 
    /* 点击事件回调函数 */
 }, false);

hover:

:hover样式不一定生效生效

由于手机浏览器并没有鼠标指针事件，w3c对此没有明文规范，各个浏览器对于hover的处理不尽相同。
有的浏览器:hover 会生效，但是当触摸移出元素后hover还是会生效，再次开始触摸点击会移除hover效果。
有的浏览器只有在A连接元素上hover才会生效。
当然会想到 ：active 这个伪类，然而在绝大部分手机浏览器下，并没有什么卵用。直接不支持 :：active 伪类。

解决方法：

虽然手机浏览器中没有鼠标指针，但是有Touch事件。

css增加hover样式:

1
.target:hover,  .target.hover { /* hover样式 */ }

js添加hover

1
2
3
4
var target= document.getElementById('id');

target.addEventListener('touchstart', function(){this.className ='hover';}, false);
target.addEventListener('touchend', function(){this.className = '';}, false);

hover与click处理事件常常在一起使用，综合解决:

css代码:

1
.target:hover,  .target.hover { /* hover样式 */ }

js代码:

1
2
3
4
5
6
7
8
9
10
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代码:

1
.target:hover,  .target.hover { /* hover样式 */ }

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
(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);
	}

})()

调用示例**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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