20160108

继续学习fastClick

  1. 判断是否为 Windows Phone
1.var deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;

如果userAgent的字符串中包括 Windows Phone

  1. 判断是否为 Android
1.var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0 && !deviceIsWindowsPhone;
  1. 判断是否为 IOS
1.var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;

因为 Windows Phone 8.1 的用户代理字符串会被误认为 Android 或 IOS 的。
所以在判断 Android 和 IOS 时,要判断不是 Windows Phone。

  1. 对于 IOS4
1.var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent);
  1. 对于 IOS6.0-7.*
1.var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS [6-7]_\d/).test(navigator.userAgent);

IOS6.0-7.* 要求目标元素手动导出。

  1. 对于黑莓
1.var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0;
  1. 判断相应的 Chrome 是否需要 fastClick
1.if (chromeVersion) {
2. if (deviceIsAndroid) {
3. metaViewport = document.querySelector('meta[name=viewport]');
4.
5. if (metaViewport) {
6. // Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89)
7. if (metaViewport.content.indexOf('user-scalable=no') !== -1) {
8. return true;
9. }
10. // Chrome 32 and above with width=device-width or less don't need FastClick
11. if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) {
12. return true;
13. }
14. }
15.
16. // Chrome desktop doesn't need FastClick (issue #15)
17. } else {
18. return true;
19. }
20.}

对于 android 的 Chrome 等有很多限制。

  1. 设置事件处理程序
1.var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];
2.var context = this;
3.for (var i = 0, l = methods.length; i < l; i++) {
4. context[methods[i]] = bind(context[methods[i]], context);
5.}

将事件的名字先写在一个数组里,然后全部绑定在this上。
对于不同的事件名称绑定不同处理时间

1.if (deviceIsAndroid) {
2. layer.addEventListener('mouseover', this.onMouse, true);
3. layer.addEventListener('mousedown', this.onMouse, true);
4. layer.addEventListener('mouseup', this.onMouse, true);
5.}
6.
7.layer.addEventListener('click', this.onClick, true);
8.layer.addEventListener('touchstart', this.onTouchStart, false);
9.layer.addEventListener('touchmove', this.onTouchMove, false);
10.layer.addEventListener('touchend', this.onTouchEnd, false);
11.layer.addEventListener('touchcancel', this.onTouchCancel, false);

addEventListener()

API

  • type:表示所监听事件的类型[zh-CN]的一个字符串。
  • listener:当指定的事件类型发生时被通知到的一个对象。该参数必是实现EventListener接口的一个对象或函数。
  • useCapture 可选:如果值为true, useCapture 表示用户希望发起捕获。 在发起捕获之后, 只要Dom子树下发生了该事件类型,都会先被派发到该注册监听器,然后再被派发到Dom子树中的注册监听器中。并且向上冒泡的事件不会触发那些发起捕获的事件监听器。进一步的解释可以查看 DOM Level 3 Events 文档。 请注意该参数并不是在所有的浏览器版本中都是可选的。如果没有指定, useCapture 默认为false 。

me:如果第三个参数设置为true,当发生了这类事件,就会先触发这类事件,并且向上冒泡的时间不会再触发这种发起捕获的事件。捕获和冒泡是二选一发生。如果都设置为捕获的话触发是从外向内的。

from StackOverflow

1.<html>
2. <body>
3. <a href="#">Content</a>
4. </body>
5.</html>

If an event (e.g. a click) happens on the a element, should the ancestor elements know? It was widely accepted that they should. But the question was in what order they should be notified. The Microsoft and Netscape developers (this should give you an idea of quite how historical we’re talking!) had differing opinions.

One model was event capture (advocated by the Netscape developers). This notified the html element first and worked its way down the tree: html body a

The other model was event bubbling (advocated by the Microsoft developers). This notified the target element first, and worked its way up the tree: a body html