移动web——touch事件应用

时间 2019-11-11

标签移动 web touch 事件应用栏目无线繁體版

原文原文链接

基本概况html

一、touch事件在移动端被用来代替click事件，由于click事件的触发会延迟影响了用户体验web

二、touch事件还能够与translate构成吸附效果浏览器

三、现行有一种排版方式是左边宽度是固定的，右边是自适应的dom

四、下面经过一个项目串联起来这些知识点，顺便说下移动端静态页面设置技巧函数

左定宽右适应spa

一、左边div设置宽高和浮动，右边内容不用设置宽高，直接overflow属性设置成hidden就能够了，若是不设置此属性，就文本绕图了scala

二、无论你如何横向拉伸浏览器，右边都可以自适应code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        div:nth-child(1) {
            width: 50px;
            height: 200px;
            background-color: #ccc;
            float: left;
        }

        div:nth-child(2) {
            overflow: hidden;
        }
    </style>
</head>
<body>
<div></div>
<div>
    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>

input标签自适应orm

一、如何input标签自适应，而不让两边的标签自适应，而且永远处于两边htm

二、首先左右两边标签是定位到各自位置，由于是定位因此不占位置。通栏的左右padding宽度各自取值到定位标签的宽度就好了，帮他们占位。

三、input标签宽度100%，继承通栏宽度，这样浏览器横向无论如何拉伸input标签都是自适应的

四、须要注意的是移动开发box-sizing属性设置的是border-box，下面若是不这样设置，input继承的宽100%并非div原来的100%宽度减去padding的值，而是固定的content增长了padding，值依然不会变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        div {
            width: 100%;
            height: 40px;
            background-color: #cccccc;
            position: relative;
            padding-right: 50px;
            padding-left: 50px;

            line-height: 40px;
        }

        div span:nth-child(1) {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 50px;
            text-align: center;
            line-height: 40px;
            background-color: yellow;
        }

        div span:nth-child(3) {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 50px;
            text-align: center;
            line-height: 40px;
            background-color: yellow;
        }

        div input {
            width: 100%;
            height: 25px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div>
    <span>占位左</span>
    <input type="search" placeholder="请搜索">
    <span>占位右</span>
</div>
</body>
</html>

touch模仿click事件

一、以前咱们对touch事件进行了封装，那么咱们如何具体应用呢？

二、在咱们本身封装的fox_tap方法回调函数中，咱们可以拿到这次点击的event对象，里面有咱们须要的target属性，看看谁是触发者，而后利用这个触发者作一些文章，这和冒泡事件中的模态框案例是同样的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        div {
            width: 50px;
            height: 100%;
        }

        div ul {
            list-style: none;
            width: 100%;
        }

        div ul li {
            float: left;
            text-align: center;
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #cccccc;
        }

        .current {
            background-color: red;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><a href="#">选择1</a></li>
        <li><a href="#">选择2</a></li>
        <li><a href="#">选择3</a></li>
        <li><a href="#">选择4</a></li>
    </ul>
</div>
<script>
    var liArr = document.querySelectorAll('div ul li');
    for (var i = 0; i < liArr.length; i++) {
        fox_tap(liArr[i], function (e) {
            console.log(e.target.tagName);
            if (e.target.tagName == "A") {
                for (var j = 0; j < liArr.length; j++) {
                    liArr[j].className = '';    
                }
                e.target.parentNode.className = 'current';
            }
        })
    }

    /*
        element：绑定的dom元素
        callback：回调函数
    */
    function fox_tap(element, callback) {
        var statTime = 0;
        var isMove = false;
        var maxTime = 250;
        var event = null;
        element.addEventListener('touchstart', function (e) {
            statTime = Date.now();
            /*
                每次执行注册事件都要初始化此值，由于touchmove事件触发的时候会更改isMove的值，不更改，
                下次再进入touchtend事件会沿用上次touchmove修改过的isMove的值，这样就一直终端函数
            */
            isMove = false;
            event = e;
        });
        element.addEventListener('touchmove', function (e) {
            isMove = true;
        });
        element.addEventListener('touchend', function (e) {
            if (isMove == true) {
                return;
            }
            if ((Date.now() - statTime) > maxTime) {
                return;
            }
            callback(event);
        });
    }
</script>
</body>
</html>

touch吸附效果

一、需求解释：所谓吸附效果其实就是咱们使用手机的时候常常遇到的效果，手指按住屏幕往上或往下滑动很深的位置，所选择的区域只能往上或往下移动到一个最大范围，超过这个范围就不会再移动，随后手指移开，所选择区域会缓动的方式归位。

二、核心思想：

（1）以touchstart事件做为开始，touchmove事件不断触发做为动力，遇到最大范围，就不许再移动，区域永远定格在最大范围上；除了最大范围，中间的区域是自由移动的。

（2）以touchend事件做为结束，来计算手指离开屏幕的时候是否须要启动缓慢的归位的效果，往下滑动，只要moveDistance>0就须要归位，往上滑动，只要当moveDistance < -(Math.abs(cha))就须要归位，其余范围都是自由移动不须要归位。

（3）还有须要注意的是，归位以后，区域的移动的坐标就须要从新赋值了，没有归位的属于自由移动的也须要从新赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        div {
            width: 100px;
            height: 100%;
            overflow: hidden;
        }

        ul {
            list-style: none;
            width: 100%;
        }

        li {
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
    </ul>
</div>
<script>
    var div = document.querySelector('div');
    var ul = document.querySelector('ul');
    var divH = div.offsetHeight;
    var ulH = ul.offsetHeight;
    var cha = ulH - divH;//这是ul比div大的差值
    var range = 100;//这是移动的范围值
    var maxRange = -(Math.abs(cha) + range);

    var startY = 0;
    var moveY = 0;
    var distance = 0;
    ul.addEventListener('touchstart', function (e) {
        ul.style.transition = '';
        startY = e.touches[0].clientY;
    });
    ul.addEventListener('touchmove', function (e) {
        //每次移动都会触发touchmove事件,意味着每次都会更新translate的值
        moveY = e.touches[0].clientY - startY;

        //当往下拖动的距离大于range时，咱们将ul定死在range上
        //当往上拖动的距离大于maxRange时，咱们将ul定死在maxRange上
        //其余范围，ul均可以自由上下移动
        var moveDistance = distance + moveY;
        if (moveDistance >= range) {
            ul.style.transform = 'translateY(' + range + 'px)';
        } else if (moveDistance <= maxRange) {
            ul.style.transform = 'translateY(' + maxRange + 'px)';
        } else {
            ul.style.transform = 'translateY(' + moveDistance + 'px)';
        }
    });
    //touchend事件就须要开始咱们的吸附效果
    //一、当ul在touchmove事件中移动的距离大于0，咱们就将他归位，别忘了归完以后须要将distance从新赋值
    //二、当ul在touchmove事件中移动的距离小于-(Math.abs(cha)),咱们就将其归位到-(Math.abs(cha))位置
    ul.addEventListener('touchend', function (e) {
        var moveDistance = distance + moveY;
        if (moveDistance >= 0) {
            ul.style.transition = 'all .5s';
            ul.style.transform = 'translateY(0px)';//回归原位
            distance = 0;
        } else if (moveDistance < -(Math.abs(cha))) {
            ul.style.transition = 'all .5s';
            ul.style.transform = 'translateY('+(-(Math.abs(cha)))+'px)';//回归原位
            distance = -(Math.abs(cha));
        } else {
            distance = moveDistance;
        }
    });
</script>
</body>
</html>