移動web——touch事件的應用
阿新 • • 發佈：2018-01-09
依然 cto 冒泡事件 ron touch事件 dom元素 哈哈 order 體驗
基本概況
1、touch事件在移動端被用來代替click事件，因為click事件的觸發會延遲影響了用戶體驗
2、touch事件還可以與translate構成吸附效果
3、排版上需求是左邊寬度是固定的，右邊是自適應的
4、下面通過一個項目串聯起來這些知識點，順便說下移動端靜態頁面設置技巧
左定寬右適應
1、左邊div設置寬高和浮動，右邊內容不用設置寬高，直接overflow屬性設置成hidden就可以了
2、不管你如何橫向拉伸瀏覽器，右邊都能夠自適應
<!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標簽自適應
1、如何input標簽自適應，而不讓兩邊的標簽自適應，並且永遠處於兩邊
2、首先左右兩邊標簽是定位到各自位置，因為是定位所以不占位置。通欄的左右padding寬度各自取值到定位標簽的寬度就行了，幫他們占位。
3、input標簽寬度100%，繼承通欄寬度，這樣瀏覽器橫向不管如何拉伸input標簽都是自適應的
4、需要註意的是移動開發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事件
1、之前我們對touch事件進行了封裝，那麽我們如何具體應用呢？
2、在我們自己封裝的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>
移動web——touch事件的應用