1.移动端300ms延迟由来及解决方案
(1) 300ms延迟由来300 毫秒延迟的主要原因是解决双击缩放(double tap to zoom)。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。
(2)解决方案
1).添加viewpoint meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
2).FastClick
移动端事件触发顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click。
fastclick.js的原理是：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。
?fastclick同样可以解决移动端点透现象。
DEMO
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>移动端点透现象</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0px;
? ? ? ? ? ? padding: 0px;
? ? ? ? }
? ? ? ? #div1 {
? ? ? ? ? ? /*红色半透明遮盖层A*/
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? background-color: rgba(255, 0, 0, 0.25);
? ? ? ? }
? ? ? ? #div2 {
? ? ? ? ? ? /*黄色内容层B*/
? ? ? ? ? ? width: 240px;
? ? ? ? ? ? height: 240px;
? ? ? ? ? ? background-color: yellow;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 30px;
? ? ? ? ? ? top: 30px;
? ? ? ? ? ? z-index: -1;
? ? ? ? }
? ? ? ? #console {
? ? ? ? ? ? /*绿色状态输出框*/
? ? ? ? ? ? border: 1px solid green;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 300px;
? ? ? ? ? ? width: 100%;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="div1"></div>
? ? <div id="div2">
? ? ? ? <a >去百度</a>
? ? </div>
? ? <div id="console"></div>
? ? <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
? ? <script type="text/javascript">
? ? ? ? window.onload = function() {
? ? ? ? ? ? if('addEventListener' in document) {
? ? ? ? ? ? ? ? document.addEventListener('DOMContentLoaded', function() {
? ? ? ? ? ? ? ? ? ? FadtClick.attach(document.body);
? ? ? ? ? ? ? ? }, false);
? ? ? ? ? ? }
? ? ? ? ? ? let div1 = document.getElementById('div1');
? ? ? ? ? ? let div2 = document.getElementById('div2');
? ? ? ? ? ? function handle(e) {
? ? ? ? ? ? ? ? let tar = e.target,eve = e.type;
? ? ? ? ? ? ? ? console.log('target:' + tar.id + " event:" + eve)
? ? ? ? ? ? ? ? if(tar.id === "div1") {
? ? ? ? ? ? ? ? ? ? div1.style.display = "none";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? div1.addEventListener('touchend', handle);
? ? ? ? ? ? div2.addEventListener('touchstart', handle);
? ? ? ? ? ? div2.addEventListener('click', handle);
? ? ? ? }
? ? </script>
</body>
</html>
说明：手机端浏览器基本已经没有300ms延时现象。
2.浏览器事件机制中事件触发三个阶段（转自 廊桥梦醉）
js中时间执行的整个过程称之为事件流，分为三个阶段：事件捕获阶段，事件目标处理函数、事件冒泡。
当某歌元素触发某个事件（如：click），顶级对象document发出一个事件流，顺着dom的树节点向触发它的目标节点流去，直到达到目标元素，这个层层递进，向下找目标的过程为事件的捕获阶段，此过程与事件相应的函数是不会触发的。
到达目标函数，便会执行绑定在此元素上的，与事件相应的函数，即事件目标处理函数阶段。
最后，从目标元素起，再依次往顶层元素对象传递，途中如果有节点绑定了同名事件，这些事件所对应的函数，在此过程中便称之为事件冒泡。
通常情况下，事件相应的函数四在冒泡阶段执行的。addEventListener的第三个参数默认为false，表示冒泡阶段执行（为true的时候，表示捕获阶段执行）。
使用e.stopPropgation()或e.cancelBubble = true(IE)可以阻断事件向当前元素的父元素冒泡。
3.?this的指向
var o = {
? ? ? ? ? ? ? ? user: 'hello',
? ? ? ? ? ? ? ? fn: function() { // this指向o
? ? ? ? ? ? ? ? ? ? console.log(this.user);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? o.fn();
? ? ? ? ? ? var test = {
? ? ? ? ? ? ? ? a: 10,
? ? ? ? ? ? ? ? fn: function(){
? ? ? ? ? ? ? ? ? ? console.log(this.a); // 12
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? test.b.fn();
? ? ? ? ? ? function Fn() {
? ? ? ? ? ? ? ? this.user = "woca";
? ? ? ? ? ? }
? ? ? ? ? ? var he = new Fn();
? ? ? ? ? ? console.log(he.user); //woca
? ? 4. apply bind call
? ? ? ? ? ? // 1. call()
? ? ? ? ? ? var a = {
? ? ? ? ? ? ? ? user: 'lalala',
? ? ? ? ? ? ? ? fn: function() {
? ? ? ? ? ? ? ? ? ? console.log(this.user);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? var b = a.fn;
? ? ? ? ? ? b(); //undefined
? ? ? ? ? ? a.fn(); // lalala
? ? ? ? ? ? //通过在call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。
? ? ? ? ? ? b.call(a); // lalala
? ? ? ? ? ? //call方法除了第一个参数以外还可以添加多个参数，如下：
? ? ? ? ? ? var a = {
? ? ? ? ? ? ? ? user: 'hahaha',
? ? ? ? ? ? ? ? fn: function(arg1, arg2) {
? ? ? ? ? ? ? ? ? ? console.log(this.user); // hahaha
? ? ? ? ? ? ? ? ? ? console.log(arg1 + arg2); // 3
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? var b = a.fn;
? ? ? ? ? ? b.call(a,1,2);
? ? ? ? ? ? // 2. apply()
? ? ? ? ? ? var a = {
? ? ? ? ? ? ? ? user: 'hahaha',
? ? ? ? ? ? ? ? fn: function(arg1, arg2) {
? ? ? ? ? ? ? ? ? ? console.log(this.user); // hahaha
? ? ? ? ? ? ? ? ? ? console.log(arg1 + arg2); // 3
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? var b = a.fn;
? ? ? ? ? ? b.apply(a,[2,4]);
? ? ? ? ? ? // *注意如果call和apply的第一个参数写的是null，那么this指向的是window对象
? ? ? ? ? ? var a = {
? ? ? ? ? ? ? ? user: "balabala",
? ? ? ? ? ? ? ? fn: function(){
? ? ? ? ? ? ? ? ? ? console.log(this); // window
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? var b = a.fn;
? ? ? ? ? ? b.apply(null);
? ? ? ? ? ? // call和apply的入参区别：call若干个，apply是数组
? ? ? ? ? ? var a = {
? ? ? ? ? ? ? ? user: 'limei',
? ? ? ? ? ? ? ? fn:function(a,b,c) {
? ? ? ? ? ? ? ? ? ? console.log(this.user); // limei
? ? ? ? ? ? ? ? ? ? console.log(a,b,c); // 10 1 2
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? var b = a.fn;
? ? ? ? ? ? var c = b.bind(a,10);
? ? ? ? ? ? c(1,2);
? ? ? ? ? ? /** 总结：
? ? ? ? ? ? ? * call和apply都是改变上下文中的this并立即执行这个函数，
? ? ? ? ? ? ? * bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加
? ? ? ? ? ? */
