JavaScript核心知识第四章---PC端、移动端网页特效（含大量代码分析）

    // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小

    if (e.persisted) {

        setRemUnit()

    }

})



// detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法

if (dpr >= 2) {

    var fakeBody = document.createElement('body')

    var testElement = document.createElement('div')

    testElement.style.border = '.5px solid transparent'

    fakeBody.appendChild(testElement)

    docEl.appendChild(fakeBody)

    if (testElement.offsetHeight === 1) {

        docEl.classList.add('hairlines')

    }

    docEl.removeChild(fakeBody)

}

}(window, document))

* * *



### []( )（3）元素滚动 scroll 系列



#### []( )3.1 元素 scroll 系列属性



`scroll` 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。



| scroll 系列属性 | 作用 |

| --- | --- |

| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |

| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |

| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |

| element.scrollHeight | 返回自身实际的宽度，不含边框，返回数值不带单位 |



#### []( )3.2 页面被卷去的头部



如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 `onscroll` 事件。



##### []( )3.2.1 案例：仿淘宝固定右侧侧边栏



要求：



1.  原先侧边栏是绝对定位；

2.  当页面滚动到一定位置，侧边栏改为固定定位；

3.  页面继续滚动，会让 返回顶部显示出来；



案例分析：



1.  需要用到页面滚动事件 `scroll` 因为是页面滚动，所以事件源是 document；

2.  滚动到某个位置，就是判断页面被卷去的上部值；

3.  页面被卷去的头部：可以通过`window.pageYOffset` 获得 如果是被卷去的左侧 `window.pageXOffset`；

4.  注意，元素被卷去的头部是 `element.scrollTop` , 如果是页面被卷去的头部 则是 `window.pageYOffset`；

5.  其实这个值 可以通过盒子的 `offsetTop` 可以得到，如果大于等于这个值，就可以让盒子固定定位了；



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    .slider-bar {

        position: absolute;

        left: 50%;

        top: 300px;

        margin-left: 600px;

        width: 45px;

        height: 130px;

        background-color: pink;

    }



    .w {

        width: 1200px;

        margin: 10px auto;

    }



    .header {

        height: 150px;

        background-color: purple;

    }



    .banner {

        height: 250px;

        background-color: skyblue;

    }



    .main {

        height: 1000px;

        background-color: yellowgreen;

    }



    span {

        display: none;

        position: absolute;

        bottom: 0;

    }

</style>

<div class="slider-bar">

    <span class="goBack">返回顶部</span>

</div>

<div class="header w">头部区域</div>

<div class="banner w">banner区域</div>

<div class="main w">主体部分</div>

<script>

    //1. 获取元素

    var sliderbar = document.querySelector('.slider-bar');

    var banner = document.querySelector('.banner');

    // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面

    var bannerTop = banner.offsetTop

    // 当我们侧边栏固定定位之后应该变化的数值

    var sliderbarTop = sliderbar.offsetTop - bannerTop;

    // 获取main 主体元素

    var main = document.querySelector('.main');

    var goBack = document.querySelector('.goBack');

    var mainTop = main.offsetTop;

    // 2. 页面滚动事件 scroll

    document.addEventListener('scroll', function () {

        // window.pageYOffset 页面被卷去的头部

        // console.log(window.pageYOffset);

        // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位

        if (window.pageYOffset >= bannerTop) {

            sliderbar.style.position = 'fixed';

            sliderbar.style.top = sliderbarTop + 'px';

        } else {

            sliderbar.style.position = 'absolute';

            sliderbar.style.top = '300px';

        }

        // 4. 当我们页面滚动到main盒子，就显示 goback模块

        if (window.pageYOffset >= mainTop) {

            goBack.style.display = 'block';

        } else {

            goBack.style.display = 'none';

        }

    })

</script>

#### []( )3.3 页面被卷去的头部兼容性解决方案



需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：



1.  声明了 DTD，使用 document.documentElement.scrollTop；

2.  未声明 DTD，使用 document.body.scrollTop；

3.  新方法 `window.pageYOffset` 和 `window.pageXOffset`，IE9 开始支持；



代码演示如下：

function getScroll() {

return {

	left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,

    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

};

}

使用的时候 getScroll().left

#### []( )3.4 三大系列总结



| 三大系列大小对比 | 作用 |

| --- | --- |

| element.offsetWidth | 返回自身包括padding、边框、内容区的宽度、返回数值不带单位 |

| element.clientWidth | 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位 |

| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |



😆主要用法😆：



1.  offset系列 经常用于获得元素位置 `offsetLeft` `offsetTop`；

2.  client 经常用于获取元素大小 `clientWidth` `clientHeight`；

3.  scroll 经常用于获取滚动距离 `scrollTop` `scrollLeft` ；

4.  注意页面滚动的距离通过 `window.pageXOffset` 获得；



#### []( )3.5 mouseenter和mouseover的区别



1️⃣ 当鼠标移动到元素上时就会触发 `mouseenter`事件类似 mouseover；



2️⃣ 两者之间的差别是`mouseover` 鼠标经过自身盒子会触发，经过子盒子还会触发。`mouseenter` 只会经过自身盒子触发；



* * *



### []( )（4）动画函数封装



#### []( )4.1 动画实现原理



核心原理：通过定时器 `setInterval()`不断移动盒子位置。



实现步骤：



1.  获得盒子当前位置；

2.  让盒子在当前位置加上1个移动距离；

3.  利用定时器不断重复这个操作；

4.  加一个结束定时器的条件；

5.  注意此元素需要添加定位，才能使用 `element.style.left`；



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    div {

        position: absolute;

        left: 0;

        width: 100px;

        height: 100px;

        background-color: pink;

    }

</style>

<div></div>

<script>

    var div = document.querySelector('div');

    var timer = setInterval(function() {

        if (div.offsetLeft >= 400) {

            // 停止动画 本质是停止定时器

            clearInterval(timer);

        }

        div.style.left = div.offsetLeft + 1 + 'px';

    }, 30);

</script>

#### []( )4.2 动画函数简单封装



注意函数需要传递2个参数，动画对象和移动到的距离。



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    div {

        position: absolute;

        left: 0;

        width: 100px;

        height: 100px;

        background-color: pink;

    }

    

    span {

        position: absolute;

        left: 0;

        top: 200px;

        display: block;

        width: 150px;

        height: 150px;

        background-color: purple;

    }

</style>

<div></div>

<span>欢迎来到我的博客哦</span>

<script>

    // 简单动画函数封装obj目标对象 target 目标位置

    function animate(obj, target) {

        var timer = setInterval(function() {

            if (obj.offsetLeft >= target) {

                // 停止动画 本质是停止定时器

                clearInterval(timer);

            }

            obj.style.left = obj.offsetLeft + 1 + 'px';

        }, 30);

    }

    var div = document.querySelector('div');

    var span = document.querySelector('span');

    // 调用函数

    animate(div, 300);

    animate(span, 200);

</script>

#### []( )4.3 动画函数给不同元素记录不同定时器



1️⃣ 如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。  

2️⃣ 核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    div {

        position: absolute;

        left: 0;

        width: 100px;

        height: 100px;

        background-color: pink;

    }

    

    span {

        position: absolute;

        left: 0;

        top: 200px;

        display: block;

        width: 150px;

        height: 150px;

        background-color: purple;

    }

</style>

<button>点击我才能走呢</button>

<div></div>

<span>欢迎来到我的博客哦</span>

<script>

    // 简单动画函数封装obj目标对象 target 目标位置

    // 给不同的元素指定了不同的定时器

    function animate(obj, target) {

        // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器

        // 解决方案就是 让我们元素只有一个定时器执行

        // 先清除以前的定时器，只保留当前的一个定时器执行

        clearInterval(obj.timer);

        obj.timer = setInterval(function() {

            if (obj.offsetLeft >= target) {

                // 停止动画 本质是停止定时器

                clearInterval(obj.timer);

            }

            obj.style.left = obj.offsetLeft + 1 + 'px';

        }, 30);

    }

    var div = document.querySelector('div');

    var span = document.querySelector('span');

    var btn = document.querySelector('button');

    // 调用函数

    animate(div, 300);

    btn.addEventListener('click', function() {

        animate(span, 200);

    })

</script>

#### []( )4.4 缓动效果原理



缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来；



😆思路😆：



1.  让盒子每次移动的距离慢慢变小，速度就会慢慢落下来；

2.  核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长；

3.  停止的条件是： 让当前盒子位置等于目标位置就停止定时器；

4.  注意步长值需要取整；



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    span {

        position: absolute;

        left: 0;

        top: 100px;

        display: block;

        width: 150px;

        height: 150px;

        background-color: purple;

    }

</style>

<button>点击我才能走呢</button>

<span>欢迎来到我的博客哦</span>

<script>

    // 缓动动画函数封装obj目标对象 target 目标位置

    // 思路：

    // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。

    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长

    // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

    function animate(obj, target) {

        // 先清除以前的定时器，只保留当前的一个定时器执行

        clearInterval(obj.timer);

        obj.timer = setInterval(function() {

            // 步长值写到定时器的里面

            var step = (target - obj.offsetLeft) / 10;

            if (obj.offsetLeft == target) {

                // 停止动画 本质是停止定时器

                clearInterval(obj.timer);

            }

            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10

            obj.style.left = obj.offsetLeft + step + 'px';



        }, 15);

    }

    var span = document.querySelector('span');

    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {

            // 调用函数

            animate(span, 500);

        })

        // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 

        // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

</script>

#### []( )4.5 动画函数多个目标值之间移动



可以让动画函数从 800 移动到 500；



当我们点击按钮时候，判断步长是正值还是负值



1.  如果是正值，则步长 往大了取整；

2.  如果是负值，则步长 向小了取整；



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    span {

        position: absolute;

        left: 0;

        top: 100px;

        display: block;

        width: 150px;

        height: 150px;

        background-color: purple;

    }

</style>

<button class="btn500">点击我到500啦</button>

<button class="btn800">点击我到800啦</button>

<span>欢迎来到我的博客哦</span>

<script>

    // 缓动动画函数封装obj目标对象 target 目标位置

    // 思路：

    // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。

    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长

    // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

    function animate(obj, target) {

        // 先清除以前的定时器，只保留当前的一个定时器执行

        clearInterval(obj.timer);

        obj.timer = setInterval(function() {

            // 步长值写到定时器的里面

            // 把我们步长值改为整数 不要出现小数的问题

            // var step = Math.ceil((target - obj.offsetLeft) / 10);

            var step = (target - obj.offsetLeft) / 10;

            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            if (obj.offsetLeft == target) {

                // 停止动画 本质是停止定时器

                clearInterval(obj.timer);

            }

            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10

            obj.style.left = obj.offsetLeft + step + 'px';



        }, 15);

    }

    var span = document.querySelector('span');

    var btn500 = document.querySelector('.btn500');

    var btn800 = document.querySelector('.btn800');



    btn500.addEventListener('click', function() {

        // 调用函数

        animate(span, 500);

    })

    btn800.addEventListener('click', function() {

            // 调用函数

            animate(span, 800);

    })

        // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 

        // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

</script>

#### []( )4.6 动画函数添加回调函数



1️⃣ 回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。



2️⃣ 回调函数写的位置：定时器结束的位置。



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    span {

        position: absolute;

        left: 0;

        top: 100px;

        display: block;

        width: 150px;

        height: 150px;

        background-color: purple;

    }

</style>

<button class="btn500">点击我到500啦</button>

<button class="btn800">点击我到800啦</button>

<span>欢迎来到我的博客哦</span>

<script>

    // 缓动动画函数封装obj目标对象 target 目标位置

    // 思路：

    // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。

    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长

    // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

    function animate(obj, target, callback) {

        // console.log(callback);  callback = function() {}  调用的时候 callback()

        // 先清除以前的定时器，只保留当前的一个定时器执行

        clearInterval(obj.timer);

        obj.timer = setInterval(function() {

            // 步长值写到定时器的里面

            // 把我们步长值改为整数 不要出现小数的问题

            // var step = Math.ceil((target - obj.offsetLeft) / 10);

            var step = (target - obj.offsetLeft) / 10;

            step = step > 0 ? Math.ceil(step) : Math.floor(step);

            if (obj.offsetLeft == target) {

                // 停止动画 本质是停止定时器

                clearInterval(obj.timer);

                // 回调函数写到定时器结束里面

                if (callback) {

                    // 调用函数

                    callback();

                }

            }

            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10

            obj.style.left = obj.offsetLeft + step + 'px';

        }, 15);

    }

    var span = document.querySelector('span');

    var btn500 = document.querySelector('.btn500');

    var btn800 = document.querySelector('.btn800');

    btn500.addEventListener('click', function() {

        // 调用函数

        animate(span, 500);

    })

    btn800.addEventListener('click', function() {

            // 调用函数

            animate(span, 800, function() {

                span.style.backgroundColor = 'red';

            });

    })

        // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 

        // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

</script>

* * *



[]( )二、移动端网页特效

----------------------------------------------------------------------



### []( )（1）触屏事件



#### []( )1.1 触屏事件概述



1️⃣ 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 `touch`（也称触摸事件），Android 和 IOS 都有。



2️⃣ `touch` 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。



| 触屏touch事件 | 说明 |

| --- | --- |

| touchstact | 手指触摸一个DOM元素时触发 |

| touchmove | 手指在一个DOM元素上滑动时触发 |

| touchend | 手指在一个DOM元素上移开时触发 |



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    div {

        width: 100px;

        height: 100px;

        background-color: pink;

    }

</style>

<div></div>

<script>

    // 1. 获取元素

    // 2. 手指触摸DOM元素事件

    var div = document.querySelector('div');

    div.addEventListener('touchstart', function() {

        console.log('我摸了你');

    });

    // 3. 手指在DOM元素身上移动事件

    div.addEventListener('touchmove', function() {

        console.log('我继续摸');

    });

    // 4. 手指离开DOM元素事件

    div.addEventListener('touchend', function() {

        console.log('轻轻的我走了');

    });

</script>

#### []( )1.2 触摸事件对象（TouchEvent）



1️⃣ `TouchEvent`是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等；



2️⃣ `touchstart`、`touchmove`、`touchend` 三个事件都会各自有事件对象；



触摸事件对象重点我们看三个常见对象列表：



| 触摸列表 | 说明 |

| --- | --- |

| touches | 正在触摸屏幕的所有手指的一个列表 |

| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |

| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |



😆温馨提醒😆：因为平时我们都是给元素注册触摸事件，所以重点记住 `targetTocuhes`；



#### []( )1.3 移动端拖动元素



1️⃣ `touchstart`、`touchmove`、`touchend` 可以实现拖动元素；



2️⃣ 但是拖动元素需要当前手指的坐标值 我们可以使用 `targetTouches[0]` 里面的`pageX` 和 `pageY`；



3️⃣ 移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离；



4️⃣ 手指移动的距离：手指滑动中的位置 减去 手指刚开始触摸的位置；



拖动元素三步曲：



1.  触摸元素 `touchstart`：获取手指初始坐标，同时获得盒子原来的位置；

2.  移动手指 `touchmove`：计算手指的滑动距离，并且移动盒子；

3.  离开手指 `touchend`:；



😆温馨提醒😆：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 `e.preventDefault();`



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    div {

        position: absolute;

        left: 0;

        width: 100px;

        height: 100px;

        background-color: pink;

    }

</style>

<div></div>

<script>

    // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置

    // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子

    // （3） 离开手指 touchend:

    var div = document.querySelector('div');

    var startX = 0; //获取手指初始坐标

    var startY = 0;

    var x = 0; //获得盒子原来的位置

    var y = 0;

    div.addEventListener('touchstart', function(e) {

        //  获取手指初始坐标

        startX = e.targetTouches[0].pageX;

        startY = e.targetTouches[0].pageY;

        x = this.offsetLeft;

        y = this.offsetTop;

    });



    div.addEventListener('touchmove', function(e) {

        //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标

        var moveX = e.targetTouches[0].pageX - startX;

        var moveY = e.targetTouches[0].pageY - startY;

        // 移动我们的盒子 盒子原来的位置 + 手指移动的距离

        this.style.left = x + moveX + 'px';

        this.style.top = y + moveY + 'px';

        e.preventDefault(); // 阻止屏幕滚动的默认行为

    });

</script>

### []( )（2）补充知识



#### []( )2.1 classList 属性



classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。



该属性用于在元素中添加，移除及切换 CSS 类。有以下方法：



1.  添加类：`element.classList.add('类名');`

focus.classList.add(‘current’);

2.  移除类：`element.classList.remove('类名');`

focus.classList.remove(‘current’);

3.  切换类：`element.classList.toggle('类名');`

focus.classList.toggle(‘current’);

😆温馨提醒😆：以上方法里面，所有类名都不带点；



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

    .bg {

        background-color: black;

    }

</style>

<div class="one two"></div>

<button> 开关灯</button>

<script>

    // classList 返回元素的类名

    var div = document.querySelector('div');

    // console.log(div.classList[1]);

    // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.

    div.classList.add('three');

    // 2. 删除类名

    div.classList.remove('one');

    // 3. 切换类

    var btn = document.querySelector('button');

    btn.addEventListener('click', function() {

        document.body.classList.toggle('bg');

    })

</script>

#### []( )2.2 click 延时解决方案



移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。



😆解决方案😆：



1.  禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟；

2.  利用touch事件自己封装这个事件解决 300ms 延迟。原理如下：



1️⃣ 当我们手指触摸屏幕，记录当前触摸时间；  

2️⃣ 当我们手指离开屏幕， 用离开的时间减去触摸的时间；  

3️⃣ 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击；

//封装tap，解决click 300ms 延时

function tap (obj, callback) {

var isMove = false;

var startTime = 0; // 记录触摸时候的时间变量

obj.addEventListener('touchstart', function (e) {

	startTime = Date.now(); // 记录触摸时间

});

obj.addEventListener('touchmove', function (e) {

    isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击

});

obj.addEventListener('touchend', function (e) {

	if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击

    	 callback && callback(); // 执行回调函数

    }

    isMove = false;  //  取反 重置

    startTime = 0;

});

}

//调用

tap(div, function(){ // 执行代码 });

3.  使用插件。 fastclick 插件解决 300ms 延迟。



❗️ ❗️ **GitHub官网地址：[https://github.com/ftlabs/fastclick/blob/main/lib/fastclick.js]( )**



* * *



[]( )三、本地存储

-------------------------------------------------------------------



### []( )（1）本地存储



随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。



本地存储特性：



1.  数据存储在用户浏览器中；

2.  设置、读取方便、甚至页面刷新不丢失数据；

3.  容量较大，`sessionStorage`约5M、`localStorage`约20M；

4.  只能存储字符串，可以将对象`JSON.stringify()`编码后存储；



### []( )（2）window.sessionStorage



1.  生命周期为关闭浏览器窗口；

2.  在同一个窗口(页面)下数据可以共享；

3.  以键值对的形式存储使用；



1️⃣ 存储数据：`sessionStorage.setItem(key, value)`



2️⃣ 获取数据：`sessionStorage.getItem(key)`



3️⃣ 删除数据：`sessionStorage.removeItem(key)`



4️⃣ 删除所有数据：`sessionStorage.clear()`



完整代码演示如下：

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<input type="text">

<button class="set">存储数据</button>

<button class="get">获取数据</button>

<button class="remove">删除数据</button>

<button class="del">清空所有数据</button>

<script>

    console.log(localStorage.getItem('username'));



    var ipt = document.querySelector('input');

    var set = document.querySelector('.set');

    var get = document.querySelector('.get');

    var remove = document.querySelector('.remove');

    var del = document.querySelector('.del');

    set.addEventListener('click', function() {

        // 当我们点击了之后，就可以把表单里面的值存储起来

        var val = ipt.value;

        sessionStorage.setItem('uname', val);

        sessionStorage.setItem('pwd', val);

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。