從零開始學 Web 之移動Web（二）JD移動端網頁，移動觸屏事件

阿新 • • 發佈：2019-01-15

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新......

github：https://github.com/Daotin/Web

部落格園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的探索之旅吧！

一、案例：JD移動端網頁

以下為詳細 html 原始碼：

<!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>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>

<body>
    <div class="jd">
        <!-- 搜尋欄開始 -->
        <div class="search">
            <a href="javascript:;" class="search-logo"></a>
            <form action="" class="search-text">
                <input type="text" placeholder="請輸入商品名稱">
            </form>
            <a href="javascript:;" class="search-login">登入</a>
        </div>
        <!-- 搜尋欄結束 -->

        <!-- 輪播圖開始 -->
        <div class="slideshow">
            <ul class="slideshow-img clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l5.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l6.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l7.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/l8.jpg" alt="">
                    </a>
                </li>
            </ul>
            <ul class="slideshow-dot">
                <li class="select"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 輪播圖結束 -->

        <!-- 導航欄開始 -->
        <div class="nav">
            <ul class="nav-ul clearfix">
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav0.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav1.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav2.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav3.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav4.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav5.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav6.png">
                    </a>
                    <p>商品分類</p>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./uploads/nav7.png">
                    </a>
                    <p>商品分類</p>
                </li>
            </ul>
        </div>
        <!-- 導航欄結束 -->

        <!-- 主體內容開始 -->
        <div class="content">
            <div class="content-box clearfix content-box-sk">
                <div class="content-title">
                    <span class="content-title-left-clock"></span>
                    <span class="content-title-left-text fl">掌上秒殺</span>
                    <div class="content-title-left-time fl">
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                        <span>:</span>
                        <span>0</span>
                        <span>0</span>
                    </div>
                    <span class="content-title-right fr">更多秒殺...</span>
                </div>
                <lu class="content-ul clearfix">
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/detail01.jpg" alt="" class="br">
                        </a>
                        <p>￥10.00</p>
                        <p class="content-ul-delete">￥20.00</p>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/detail01.jpg" alt="" class="br">
                        </a>
                        <p>￥10.00</p>
                        <p class="content-ul-delete">￥20.00</p>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./uploads/detail01.jpg" alt="">
                        </a>
                        <p>￥10.00</p>
                        <p class="content-ul-delete">￥20.00</p>
                    </li>
                </lu>
            </div>
            <div class="content-box clearfix">
                <div class="content-title">
                    <h3>京東超市</h3>
                </div>
                <lu class="content-ul">
                    <li class="fl">
                        <a href="javascript:;">
                            <img src="./uploads/cp1.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl bb">
                        <a href="javascript:;">
                            <img src="./uploads/cp2.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl">
                        <a href="javascript:;">
                            <img src="./uploads/cp3.jpg" alt="">
                        </a>
                    </li>
                </lu>
            </div>
            <div class="content-box clearfix">
                <div class="content-title">
                    <h3>京東超市</h3>
                </div>
                <lu class="content-ul">
                    <li class="fr">
                        <a href="javascript:;">
                            <img src="./uploads/cp4.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl bb">
                        <a href="javascript:;">
                            <img src="./uploads/cp5.jpg" alt="">
                        </a>
                    </li>
                    <li class="fl bl">
                        <a href="javascript:;">
                            <img src="./uploads/cp6.jpg" alt="">
                        </a>
                    </li>
                </lu>
            </div>
        </div>
        <!-- 主體內容結束 -->
    </div>
</body>

</html>

CSS 原始碼：

CSS 初始化程式碼：

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, span, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img, input, div {
    margin: 0;
    padding: 0;
    /* 盒模型 */
    box-sizing: border-box;
    /* 去掉移動端特有的點選高亮效果: transparent 透明色*/
    -webkit-tap-highlight-color: transparent;
}

body {
    width: 100%;
    font: 12px/150% "Microsoft YaHei", sans-serif;
    color: #666;
    background: #fff
}

fieldset, img, input, button {          /*fieldset組合表單中的相關元素*/
    border: none;
    padding: 0;
    margin: 0;
    outline-style: none;  /*去除藍色邊框*/
}

ul, ol, li {
    list-style: none;               /*清除列表風格*/
}

a,
a:hover {
    text-decoration: none;
}

a:active {
    color: red;
}

select, input {
    vertical-align: middle;  /*圖片文字垂直居中*/
}

select, input, textarea {
    font-size: 12px;
    margin: 0;
}

textarea {
    resize: none;   /*不能改變多行文字框的大小*/
}

img {
    border: 0;
    vertical-align: middle; /*  去掉圖片低測預設的3畫素空白縫隙*/
}

table {
    border-collapse: collapse;          /*合併外邊線*/
}


.clearfix::before, 
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/
} 

h1, h2, h3, h4, h5, h6 {
    text-decoration: none;
    font-weight: normal;
    font-size: 100%;
}

s, i, em {
    font-style: normal;
    text-decoration: none;
}

/*公共類*/
.w {
    /*版心 提取 */
    width: 1225px;
    margin: 0 auto;
}

.fl {
    float: left
}

.fr {
    float: right
}

.al {
    text-align: left
}

.ac {
    text-align: center
}

.ar {
    text-align: right
}

.hide {
    display: none
}
.bl {
    border-left: 1px solid #ccc;
}
.br {
    border-right: 1px solid #ccc;
}
.bb {
    border-bottom: 1px solid #ccc;
}

CSS 主要程式碼：

.jd {
    width: 100%;
    /* height: 1000px; */
    /* 最大寬度 */
    max-width: 640px;
    /* 最小寬度 */
    min-width: 320px;
    margin: 0 auto;
    background-color: #eee;
}

/* 搜尋欄開始 */

.search {
    width: 100%;
    max-width: 640px;
    height: 40px;
    background-color: rgba(233, 35, 34, 0);
    position: fixed;
    z-index: 10;
}

.search-logo {
    width: 56px;
    height: 20px;
    background-image: url("../images/jd-sprites.png");
    background-size: 200px 200px;
    background-position: left -109px;
    position: absolute;
    left: 10px;
    top: 10px;
}

.search-login {
    color: #fff;
    font-size: 14px;
    line-height: 40px;
    position: absolute;
    right: 10px;
    top: 0;
}

.search-login:visited {
    color: #fff;
}

.search-text {
    width: 100%;
    height: 100%;
    padding-left: 76px;
    padding-right: 50px;
}

.search-text>input {
    width: 100%;
    height: 30px;
    margin-top: 5px;
    border-radius: 15px;
    color: #666;
    padding-left: 30px;
    font-size: 14px;
}

.search-text::before {
    content: "";
    width: 19px;
    height: 20px;
    background-image: url("../images/jd-sprites.png");
    background-size: 200px 200px;
    background-position: -60px -109px;
    position: absolute;
    left: 83px;
    top: 10px;
}

/* 搜尋欄結束 */

/* 輪播圖開始 */

.slideshow {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slideshow-img {
    width: 800%;
}

.slideshow-img>li {
    width: 12.5%;
    float: left;
}

.slideshow-img>li img {
    width: 100%;
}

.slideshow-dot {
    width: 80px;
    height: 10px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.slideshow-dot>li {
    width: 6px;
    height: 6px;
    float: left;
    border-radius: 50%;
    border: 1px solid #fff;
    margin: 0 2px;
}

.slideshow-dot>li.select {
    background-color: #fff;
}

/* 輪播圖結束 */

/* 導航欄開始 */

.nav {
    width: 100%;
    box-shadow: 0 2px 2px #ccc;
}

.nav-ul {
    width: 100%;
    background-color: #fff;
}

.nav-ul>li {
    width: 25%;
    float: left;
    text-align: center;
    margin-top: 10px;
}

.nav-ul>li img {
    width: 60px;
    height: 60px;
}

.nav-ul>li p {
    margin: 5px 0;
}

/* 導航欄結束 */

/* 主體內容開始 */

.content {
    width: 100%;
}

.content-box {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0 2px 2px #ccc;
}

.content-title {
    border-bottom: 1px solid #ccc;
    position: relative;
}

.content-box>.content-title {
    height: 30px;
    line-height: 30px;
}

.content-title>h3 {
    margin-left: 20px;
    position: relative;
    font-weight: 700;
}

.content-title>h3::before {
    content: "";
    width: 3px;
    height: 10px;
    background-color: #e92322;
    position: absolute;
    left: -8px;
    top: 10px;
}

.content-ul {
    width: 100%;
}

.content-ul>li {
    width: 50%;
}

.content-ul>li img {
    width: 100%;
    display: block;
}

.content-title-left-clock {
    display: block;
    width: 16px;
    height: 20px;
    background-image: url("../images/jd-sprites.png");
    background-size: 200px 200px;
    background-position: -85px -111px;
    position: absolute;
    left: 3px;
    top: 4px;
}

.content-title-left-text {
    padding: 0 10px 0 25px;
    color: #e92322;
}

.content-title-left-time>span {
    display: inline-block;
    width: 12px;
    height: 18px;
    line-height: 18px;
    background-color: #363634;
    color: #e5d790;
    text-align: center;
    font-weight: bold;
}

.content-title-left-time>span:nth-of-type(3n) {
    background-color: transparent;
    width: 3px;
}

.content-title-right {
    margin-right: 10px;
}

.content-box-sk {
    padding: 10px;
}

.content-box-sk>.content-title {
    border-bottom: 0;
    margin-bottom: 10px;
}

.content-box-sk .content-ul {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
}

.content-box-sk .content-ul>li {
    /* width: 33.33%; */
    text-align: center;
}

.content-box-sk .content-ul>li img {
    width: 100%;
    display: inline-block;
    padding: 0 30px;
    margin-bottom: 5px;
}

.content-ul-delete {
    text-decoration: line-through;
    color: #aaa;
}

/* 主體內容結束 */

javaScript 程式碼：

window.onload = function () {
    bannerEffect();
    timeCount();
    slideshowEffect();
};

// 搜尋欄上下滾動時改變透明度
function bannerEffect() {
    var bannerObj = document.querySelector(".search");
    var slideshowObj = document.querySelector(".slideshow")

    // 獲取搜尋欄的高度
    var bannerHeight = bannerObj.offsetHeight; //40
    // 獲取輪播圖高度
    var slideshowHeight = slideshowObj.offsetHeight; //311

    window.addEventListener("scroll", function () {
        // 頁面向上滾動的距離（相容程式碼）
        var scrolllen = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        if (scrolllen < (slideshowHeight - bannerHeight)) {
            var setopacity = scrolllen / (slideshowHeight - bannerHeight);
            bannerObj.style.backgroundColor = "rgba(233, 35, 34, " + setopacity + ")";
        }
    }, false);
}

// 主體內容秒殺欄目的倒計時
function timeCount() {
    var spanObjs = document.querySelector(".content-title-left-time").children;
    var titleCount = 2 * 60 * 60; // 2小時倒計時

    var timeId = setInterval(function () {
        titleCount--;

        var hour = Math.floor(titleCount / 3600);
        var minute = Math.floor((titleCount % 3600) / 60);
        var second = titleCount % 60;

        if (titleCount >= 0) {
            // 下面的true實際想表達的是不執行任何操作，但是必須要寫個語句，所以用true代替。
            spanObjs[0].innerHTML == Math.floor(hour / 10) ? true : spanObjs[0].innerHTML = Math.floor(hour / 10);
            spanObjs[1].innerHTML == hour % 10 ? (true) : spanObjs[1].innerHTML = hour % 10;
            spanObjs[3].innerHTML == Math.floor(minute / 10) ? true : spanObjs[3].innerHTML = Math.floor(minute / 10);
            spanObjs[4].innerHTML == minute % 10 ? true : spanObjs[4].innerHTML = minute % 10;
            spanObjs[6].innerHTML == Math.floor(second / 10) ? true : spanObjs[6].innerHTML = Math.floor(second / 10);
            spanObjs[7].innerHTML == second % 10 ? true : spanObjs[7].innerHTML = second % 10;
        } else {
            titleCount = 0;
            clearInterval(timeId);
            return;
        }
    }, 1000);
}

// 輪播圖
function slideshowEffect() {
    // 1. 自動輪播圖
    // 思路：1.1、使用js在圖片開頭動態新增原本最後一張圖片
    // 1.2、使用js在圖片結尾動態新增原本第一張圖片

    // 獲取輪播圖
    var slideshowObj = document.querySelector(".slideshow");

    // 獲取ul
    var ulObj = document.querySelector(".slideshow-img");

    // 獲取所有li
    var liObjs = ulObj.children;
    // 設定li的索引值
    var index = 1;

    // 要新增的第一個li和最後一個li
    var first = liObjs[0].cloneNode(true);
    var last = liObjs[liObjs.length - 1].cloneNode(true);

    // 在li開頭結尾新增克隆圖片
    ulObj.appendChild(first);
    ulObj.insertBefore(last, ulObj.firstElementChild);

    // 設定ul寬度
    ulObj.style.width = liObjs.length + "00%";
    // 設定每個li的寬度
    for (var i = 0; i < liObjs.length; i++) {
        liObjs[i].style.width = slideshowObj.offsetWidth + "px";
    }
    // 預設顯示第一張圖
    ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth) + "px)"

    // 改變視窗大小的時候自動調節輪播圖的寬度
    window.addEventListener("resize", function () {
        ulObj.style.width = liObjs.length + "00%";
        for (var i = 0; i < liObjs.length; i++) {
            liObjs[i].style.width = slideshowObj.offsetWidth + "px";
        }
        // 改變視窗的大小的時候，不能僅僅回到第一張，要回到第index張
        ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth * index) + "px)"

    }, false);

    // 1. 實現自動輪播效果
    var timerId;
    var timerStart = function () {
        timerId = setInterval(function () {
            index++;

            ulObj.style.transition = "transform 0.5s ease-in-out";
            ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth * index) + "px)";

            // 設定小白點
            if(index >= liObjs.length - 1) {
                setDot(1);
                return;
            }
            setDot(index);
            
            // 由於過渡效果，使得過渡的時候，就進行if、判斷，無法顯示最後一張圖片。
            // 所以進行延時過渡的時候，等所有過渡效果完成後再進行判斷是否到達最後一張。
            setTimeout(function () {
                if (index >= liObjs.length - 1) {
                    index = 1;
                    // 從最後一張調到第一張的時候，取消過渡效果
                    ulObj.style.transition = "none";
                    ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth * index) + "px)";
                }
            }, 500);            
        }, 1500);
       
    };

    timerStart();

    // 2. 輪播圖的手動滑動效果
    // 2.1、記錄手指的起始位置
    // 2.2、記錄手指滑動時與起始位置水平軸的偏移距離
    // 2.3、設定當手指鬆開後，判斷偏移距離的大小，決定回彈還是翻頁。
    var startX, diffX;
    // 設定節流閥，避免手動滑動過快，在過渡過程中也有滑動，造成的最後圖片會有空白的操作，也就是index越界了，沒有執行相應的 webkitTransitionEnd 事件。
    var isEnd = true;
    ulObj.addEventListener("touchstart", function (e) {
        // 手指點選輪播圖時，停止自動輪播效果
        clearInterval(timerId);
        startX = e.targetTouches[0].clientX;

    }, false);

    // 最開始的時候不觸發，原因ul的高度為0
    ulObj.addEventListener("touchmove", function (e) {
        if (isEnd) {
            // 手指移動的距離
            diffX = e.targetTouches[0].clientX - startX;
            // 關閉過渡效果，否則手指滑動困難
            ulObj.style.transition = "none";
            ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth * index - diffX) + "px)";
        }
    }, false);


    ulObj.addEventListener("touchend", function (e) {        
        isEnd = false;

        // 判斷當前滑動的距離是否超過一定的距離，則翻頁
        if (Math.abs(diffX) > 100) {
            if (diffX > 0) {
                index--;
            } else {
                index++;
            }
            // 翻頁
            ulObj.style.transition = "transform 0.5s ease-in-out";
            ulObj.style.transform = "translateX(-" + slideshowObj.offsetWidth * index + "px)";
        } else if (Math.abs(diffX) > 0) { // 回彈
            ulObj.style.transition = "transform 0.5s ease-in-out";
            ulObj.style.transform = "translateX(-" + slideshowObj.offsetWidth * index + "px)";
        }

        // 每次離開手指清除startX, diffX的值
        startX = 0;
        diffX = 0;

        if(index == liObjs.length-1) {
            setDot(1);
            return;
        } else if(index == 0) {
            setDot(liObjs.length-2);
            return;
        }
        setDot(index);

        // 手指離開重新開啟定時器
        timerStart();
    }, false);

    // 我們發現在第一張往右滑動，或者最後一張往左滑動時，會造成空白
    /*webkitTransitionEnd:可以監聽當前元素的過渡效果執行完畢，當一個元素的過渡效果執行完畢的時候，會觸發這個事件*/
    ulObj.addEventListener("webkitTransitionEnd", function () {
        // 如果到了第一張（index=0），讓index=count-2
        // 如果到了最後一張(index=count-1)，讓index=1;
        if (index == 0) {
            index = liObjs.length - 2;
            // 從第一張到最後一張的時候，取消過渡效果
            ulObj.style.transition = "none";
            ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth * index) + "px)";
        } else if (index >= liObjs.length - 1) {
            index = 1;            
            // 從最後一張調到第一張的時候，取消過渡效果
            ulObj.style.transition = "none";
            ulObj.style.transform = "translateX(" + -(slideshowObj.offsetWidth * index) + "px)";
        }

        // 設定過渡效果完成後，才可以繼續滑動
        setTimeout(function () {
            isEnd = true;
        }, 100);
    }, false);


    // 3. 設定輪播圖小白點
    function setDot(index) {
        var dotliObjs = document.querySelector(".slideshow-dot").children;

        // 建議不使用className，因為class屬性可能有多個，使用dotliObjs[i].className = "";可能將其他的類樣式一起清除。
        for (var i = 0; i < dotliObjs.length; i++) {
            // 清除所有select樣式
            dotliObjs[i].classList.remove("select");
        }
        // 設定當前索引的樣式為select
        dotliObjs[index-1].classList.add("select");
    }
}

這裡面的難點和重點就是輪播圖部分：

1、思路：

要實現輪播圖，必須在首尾新增圖片，如果直接在 html 程式碼直接新增圖片的話，由於圖片的數量是不固定的，那麼每次圖片的數量發生改變的話，不僅需要設定 html 的原始碼，而且還要設定對應的 css 程式碼，所以，為了從後臺獲取的圖片數量不固定的情況下，也能夠實現輪播效果，我們可以使用 js 來動態的新增圖片。

輪播圖要首尾連線，關鍵是前後加圖。

使用 js 動態的在最後的位置，新增原始第一張圖片；在開始的位置，新增原始最後一張圖片。
重新設定圖片盒子的寬度和圖片的寬度，並且在放大縮小視口大小的時候，自動改變寬度。
開啟定時器，自動輪播
新增移動端滑動事件，手動輪播。
新增過渡效果結束事件，解決手動滑動到第一張和最後一張時，出現空白的問題。
設定小白點，在自動輪播和手動輪播兩個地方新增。

2、在手動輪播的時候，一定記得將自動輪播時的過渡效果清除。還要關閉定時器，在手指離開的時候再次設定是定時器。關於手動輪播的相關觸控事件知識點在下面介紹。

二、移動觸屏事件

1、事件型別

touchstart: 手指觸控式螢幕幕時觸發

touchmove: 手指在螢幕上移動時觸發

touchend: 手指離開螢幕時觸發

細節：

touch 事件的觸發，必須保證元素有大於0的寬高值，否則無法觸發。（比如 ul 下 li 有寬高，ul 會被撐開，有了寬高，但是當 li 浮動起來後，ul 的寬還在，高為0，此時無法對 ul 觸發 touch 事件。）

2、TouchEvent 物件

TouchEvent 事件物件是手指觸控式螢幕幕時觸發的事件物件，在這個物件中，我們主要關注三個物件陣列。

touches：指螢幕上所有的觸控的手指列表

targetTouched：當前目標上所有的觸控的手指列表

changedTouches：指當前螢幕上變換的手指物件。在 touchstart 時為新接觸螢幕的手指，在 touchend 時為新離開螢幕的手指。

PS：沒有對比出 touches 同 targetTouches 的差異，推薦使用 targetTouches。

3、targetTouches 物件

targetTouches 物件中有幾個座標值值得我們關注：

screenX/screenY：手指的觸控點相對螢幕左上角的距離。

clientX/clientY：手指的觸控點相對視口（移動端螢幕左上角）的距離。

pageX/pageY：手指的觸控點相對當前頁面的左上角的距離（當前頁面可能有滾動條，所以距離包含滾動的距離）。

而，一般當我們在移動端設定了 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 之後，clientX/clientY 的距離和 pageX/pageY 的距離是相同的了。所以一般使用 clientX/clientY。

從零開始學 Web 之移動Web（二）JD移動端網頁，移動觸屏事件

一、案例：JD移動端網頁

二、移動觸屏事件

1、事件型別

2、TouchEvent 物件

3、targetTouches 物件

《從零開始學Swift》學習筆記（Day67）——Cocoa Touch設計模式及應用之MVC模式

《從零開始學Swift》學習筆記（Day60）——Core Foundation框架

從零開始搭建框架SSM+Redis+Mysql（二）之MAVEN項目搭建

從零開始學Kotlin-使用接口（7）

webpack從零開始構建專案之rem問題（三）

【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

轉載：高德地圖API學習從零開始學高德JS API（一）地圖展現

Windows環境下，從零開始搭建Nodejs+Express+Ejs框架（二）---安裝Express，ejs

從零開始學習微信小程式（二）

從零開始學習音視訊程式設計技術（二）音訊格式講解

從零開始搭建一個簡易的伺服器（二）

從零開始搭建 gRPC 服務 - Golang 篇（二）

【轉】從零開始學習音視訊程式設計技術（二）音訊格式講解

從零開始搭建一個主流專案框架（二）—MVP+Dagger2

從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

從零開始學 Web 之 JS 高階（二）原型鏈，原型的繼承

《從零開始學Swift》學習筆記（Day 57）——Swift編碼規範之凝視規範：文件凝視、文檔凝視、代碼凝視、使用地標凝視

【SpringMvc】從零開始學SpringMvc之資料庫(二)

【SpringMvc】從零開始學SpringMvc之初始化(一)

【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)

從零開始學 Web 之 移動Web（二）JD移動端網頁，移動觸屏事件

一、案例：JD移動端網頁

二、移動觸屏事件

1、事件型別

2、TouchEvent 物件

3、targetTouches 物件

相關推薦

從零開始學 Web 之移動Web（二）JD移動端網頁，移動觸屏事件