移動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>