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 href="https://www.baidu.com/">去百度</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方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加
*/
网友评论