一、移動端預設樣式 ·IOS和Android下觸摸元素時出現半透明灰色遮罩 ·IOS按鈕圓角的問題 ·上下拉動滾動條時卡頓、慢 ·禁止複製、選中文本 ·旋轉屏幕時，字體大小調整的問題 二、移動端事件 2.1 基本使用 PC端事件仍然可以在移動端使用不過會存在一些問題，一會我們來闡述。 那麼移動端也有 ...
一、移動端預設樣式
·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
開源(開放源碼)=>代碼健壯性
免費
佈局可以自己寫亦可以仿照他們的
使用：
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|他會刷新網頁
