前端筆記之移動端&響應式（下）預設樣式&事件&慣性拋擲&swiper&loaction物件

mufengsm發表於2019-04-12
前端筆記事件物件

一、移動端預設樣式

·IOS和Android下觸控元素時出現半透明灰色遮罩

a,input,button{
    -webkit-tap-highlight-color: transparent;
}

 

·IOS按鈕圓角的問題 

button,input{
    border-radius: 0;
    -webkit-appearance: none;
}

 

·上下拉動滾動條時卡頓、慢 

body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

 

·禁止複製、選中文字 

*{
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
     user-select: none;
}

 

·旋轉螢幕時，字型大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:100%;
}

二、移動端事件

2.1 基本使用

PC端事件仍然可以在移動端使用不過會存在一些問題，一會我們來闡述。

那麼移動端也有移動端專有的事件。

 

touchstart：當使用者手指觸控到的觸控式螢幕的時候觸發。事件物件的 target 就是touch 發生位置的那個元素。

touchmove：當使用者在觸控式螢幕上移動觸點(手指)的時候，觸發這個事件。一定是先要觸發touchstart事件，再有可能觸發 touchmove 事件。

touchend：當使用者的手指抬起的時候，會觸發 touchend 事件。如何使用者的手指從觸屏裝置的邊緣移出了觸屏裝置，也會觸發 touchend 事件。

touchcancel：一般用於儲存現場資料。比如：正在玩遊戲，如果發生了 touchcancel 事件，則應該把遊戲當前狀態相關的一些資料儲存起來。

 

基本語法：

<div></div>
<script type="text/javascript">
    var oDiv = document.getElementsByTagName("div")[0];
    //DOM0級事件-時好時壞
    oDiv.ontouchend = function(){
        this.innerText += "手抬起"
    }

    //DOM2級事件
    //oDiv.addEventListener(事件名稱(不加on),事件處理函式,是否捕獲)
            
    oDiv.addEventListener("touchstart",function(){
        this.innerHTML += "DOM2級<br/>"
    },false)
</script>

2.2 事件物件

當給某個元素加上了事件繫結函式之後，事件函式預設的第一個引數就是事件物件。

事件物件：當使用者在瀏覽器下觸發了某個行為，事件物件會記錄使用者操作時一些細節資訊。

 

注意：touchstart和touchmove事件中的event事件物件中有一個屬性是touches是陣列，裡面封裝了每個手指的資訊，包括手指的位置、手指的粗細、手指力度（iPhone6s以上提供），都有以下截圖資料：

 

web頁面基本上都是1個手指，和app不一樣。web頁面一般沒有捏合、旋轉操作。都是一根手指。

 event.touches[0]

 

1 touches         表示當前跟蹤的觸控操作的touch物件的陣列

2 targetTouches   特定於事件目標的touch物件陣列

3 changeTouches   表示自上次觸控以來發生了什麼改變的touch物件陣列

touchend事件比較特殊，離開的時候能獲取到最終的資訊。

touches屬性是一個陣列，它表示是現在仍然在螢幕上的手指

changedTouches屬性也陣列，表示離開的手指資訊，離開時會被push進入陣列，並且保留最終的資訊。

2.3touch物件詳解之位置尺寸

每個touch物件包含的屬性如下：

1 clientX：觸控目標在視口中的x座標。

2 clientY：觸控目標在視口中的y座標。

3 pageX：觸控目標在頁面中的x座標。

4 pageY：觸控目標在頁面中的y座標。

5 screenX：觸控目標在螢幕中的x座標。

6 screenY：觸控目標在螢幕中的y座標。

7 target：觸目的DOM節點目標。

8 identifier：標識觸控的唯一ID。

 

2.4事件點透

2.4.1現象

移動端的點透：當上層元素髮生點選的時候，下層元素也有點選（焦點）特性，在300ms之後，如果上層元素消失或者隱藏，目標點就會“漂移”到下層元素身上，就會觸發點選行為。

<a href="http://baidu.com">百度一下</a>
<p>pc點選事件</p>
<div></div>
        
<script type="text/javascript">
    //pc端事件是可以在移動端使用的  但是存在一些問題(事件點透)-pc端事件比移動端事件慢300ms
    var oDiv = document.getElementsByTagName("div")[0];
    var oP = document.getElementsByTagName("p")[0];
            
    oP.onclick = function(){
        this.style.color = "orange";
    }

    oDiv.addEventListener("touchend",function(){
        this.style.display = "none";
    },true);
</script>

 如果我們在百度一下 pc點選事件上方進行點選會發現當紅色區域隱藏後還會觸發其自身的事件。

這種現象就是事件點透。

2.4.2 成因

我們上面說過，移動裝置能夠響應click事件，不過比較慢，這是為什麼？

因為click事件觸發之後，要等200ms到300ms左右，因為瀏覽器有一些預設的手指快捷操作，比如：快速雙擊兩次螢幕視口會放大，彈出輔助選單等等。

大家用手機上網的時候，尤其看一些PC端網站，雙擊螢幕，當前視口就變大了。

 

本質上：PC端事件比移動端的事件略慢，大概是在300ms左右。所以我們也稱這種現象為300毫秒延遲。

2.4.3解決方案

下層不再使用具有點選特性的元素，獲取取消具有點選特性元素的屬性，並且使用移動端事件。

 

比如我們看移動端淘寶，他在導航區域就沒有使用a標籤而是全部使用div。

因為淘寶不再擔心優化問題，而我們做網站時是特別看重優化問題的，所以我們不能全部使用div，那麼我們的解決方案是：把a標籤的href屬性去掉，用一個自定義的屬性來儲存url，並且通過js進行事件觸發動態跳轉頁面。

 

程式碼如下：

<nav>
    <ul>
        <li><a data-href="http://baidu.com">百度</a></li>
        <li><a data-href="http://163.com">163</a></li>
        <li><a data-href="http://qq.com">騰訊</a></li>
    </ul>
<nav>
<script type="text/javascript">
    var aS = document.querySelectorAll("a");
        
    for(var i=0;i<aS.length;i++){
        aS[i].addEventListener("touchstart",function(){
            //頁面跳轉-window.location.href
            //把被點選的a的自定義屬性拿過來 然後複製就好
            window.location.href = this.getAttribute("data-href");                    
        },true)
    }
</script>

三、慣性拋擲

拖拽後根本停不下來，有慣性，會慢慢停下來，有兩種方法：

方法一： overflow:auto 很智慧的把移動的內容就變成可以滑動、拋擲貨慣性的了;

 

觸控的時候有顏色的變化：(iPhone和iPad)

-webkit-tap-highlight-color:#00FF3E;

nav{ 
width:100%;height:50px;padding:20px 0;
background:#FF6969;overflow:hidden; overflow-x:auto; 
}
nav ul{width:99999px; }
nav ul li{float:left;margin-right:10px;line-height:50px; }
<nav>
    <ul>
        <li>欄目欄目1</li>
        <li>欄目欄目2</li>
        <li>欄目欄目3</li>
        ...
    </ul>
</nav>

方法二： swiper

<!DOCTYPE html>
<html lang="zh">

    <head>
        <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>
        <link rel="stylesheet" type="text/css" href="css/swiper.css"/>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            nav{
                background-image: linear-gradient(to right,#fff,deepskyblue,#fff);
            }
            li{
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <nav class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">首頁</li>
                <li class="swiper-slide">國內</li>
                <li class="swiper-slide">國際</li>
                <li class="swiper-slide">軍事</li>
                <li class="swiper-slide">財經</li>
                <li class="swiper-slide">娛樂</li>
                <li class="swiper-slide">體育</li>
                <li class="swiper-slide">網際網路</li>
                <li class="swiper-slide">科技</li>
                <li class="swiper-slide">遊戲</li>
                <li class="swiper-slide">個性推薦</li>
                <li class="swiper-slide">女人</li>
                <li class="swiper-slide">汽車</li>
                <li class="swiper-slide">房產</li>
            </ul>
            <div class="swiper-scrollbar"></div>
        </nav>
        
        <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            new Swiper(".swiper-container",{
                //具體的配置項
                slidesPerView: 5,
                scrollbar: {
                    el: '.swiper-scrollbar',
                    dragSize: 50
                },
            })
        </script>
    </body>

</html>

四、swiper

官網：http://www.swiper.com.cn/

開源(開放原始碼)=>程式碼健壯性

免費

佈局可以自己寫亦可以仿照他們的

使用：

1.首先載入外掛，需要用到的檔案有swiper.min.js和swiper.min.css檔案。可下載Swiper檔案或使用CDN。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

 

2.HTML內容。

<div class="swiper-container">
    <!--輪播圖-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 下面的點點點 -->
    <div class="swiper-pagination"></div>
    
    <!-- 左右按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滾動條 -->
    <div class="swiper-scrollbar"></div>
</div>
導航等元件可以放在container之外

 

3.初始化Swiper：最好是挨著</body>標籤

<script>        
    var mySwiper = new Swiper ('.swiper-container/選擇器', {
    direction: 'vertical',/*水平or垂直*/
    loop: true,/*無縫輪播*/
    
    // 如果需要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前進後退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>

五、BOM之hash、search

5.1 認識location物件

hash：#後面的我們稱之為hash

Host：主機

Hostname：主機名

Href：地址

Port：埠號

Search：?後面的我們稱之為search|他會重新整理網頁

 

相關文章