標籤：tde 操作 預設事件 移動 otto 解決方案 pagex return 安卓
1. 安卓下大面積觸摸會導致觸發touchmove的問題 判斷一下touchstart的上一次位置和當前位置是否一樣，一樣就使move return掉<body><div class="page"> <div id="box"></div></div><script type="text/javascript">var page = document.querySelector(‘.page‘);page.addEventListener(‘touchstart‘, function(e) { e.preventDefault();});var lastPoint = {};box.addEventListener(‘touchstart‘, function(e) { lastPoint = { x:e.changedTouches[0].pageX, y:e.changedTouches[0].pageY } this.innerHTML = "start"; this.innerHTML += "<br/>x:"+e.changedTouches[0].pageX; this.innerHTML += "<br/>y:"+e.changedTouches[0].pageY;});box.addEventListener(‘touchmove‘, function(e) { if(e.changedTouches[0].pageX == lastPoint.x &&e.changedTouches[0].pageY == lastPoint.Y){ return; } this.innerHTML += "<br/>move"; this.innerHTML = "x:"+e.changedTouches[0].pageX; this.innerHTML += "<br/>y:"+e.changedTouches[0].pageY; lastPoint = { x:e.changedTouches[0].pageX, y:e.changedTouches[0].pageY }});</script>
2.移動端輸入框被遮擋了怎麼辦 在focus裡去做：擷取螢幕高度，比較輸入框的底部是否超出了螢幕，超出就讓外框向上移動超出的距離 在blur裡做：把外框回到原來位置
<div class="page"> <div class="info"></div> <input type="text" class="text" name=""></div><script type="text/javascript" src="js/mTween.js"></script><script type="text/javascript">(function(){ var page = document.querySelector(‘.page‘); var text = document.querySelector(‘.text‘); var info = document.querySelector(‘.info‘); var old = 0; css(page,"translateY",0); /* 移動端輸入框被遮擋的問題 1) 在軟體盤彈出之後（在focus中加個延遲時間），擷取input的座標 2) 判斷input是否遮擋 1. 判斷 input 是否在 可視區的高度以下 3) 如果被遮擋了 就向上移動整個頁面 1. 用被軟體盤遮擋的距離 */ text.addEventListener(‘focus‘, function(e) { setTimeout(function(){ //延遲一段時間之後，才可以擷取到軟鍵盤彈出之後的座標 var rect = text.getBoundingClientRect(); var h = document.documentElement.clientHeight; old = css(page,"translateY"); if(rect.bottom > h){ //info.innerHTML = "被遮擋了"; var dis = rect.bottom - h; css(page,"translateY", old - dis); } },1000); }); text.addEventListener(‘blur‘, function(e) { old = css(page,"translateY",old); });})();</script> 3.移動端怎麼固定橫屏顯示 檢測手機豎屏的時候，元素給元素添加90deg的旋轉 檢測手機橫屏的時候，元素給元素的旋轉再改為0 4.事件點透 pc端的滑鼠事件在移動端也有效果，但是在移動端使用滑鼠事件會有300毫秒的延遲，如果有兩個元素是重疊的，點擊之後上面那個元素消失了就會出現點透事件，如果下面元素有滑鼠事件，就會被觸發 因為執行過程：手指按下之後，會先執行touch事件，然後記錄點擊的座標，300ms之後，在該座標上尋找元素，如果該元素繫結了滑鼠事件，就把事件執行了 解決辦法： e.preventDefault ( )，或者延遲三百毫秒以上來處理事件 不推薦的解決方案：給單個空間添加阻止冒泡5.解決安卓下點擊了軟鍵盤縮放之後，觸發不了input的blur的問題
<body><input id="text" type="text" name=""><div id="info"></div><script type="text/javascript">(function(){ var text = document.querySelector(‘#text‘); var info = document.querySelector(‘#info‘); text.onfocus = function(){ //軟鍵盤的彈出 會影響視窗的大小發生改變 // 展開是 改變一次，收縮起來又改變一次 window.addEventListener(‘resize‘, toResize); }; function toResize(){ window.removeEventListener(‘resize‘, toResize); window.addEventListener(‘resize‘, toBlur); } function toBlur(){ window.removeEventListener(‘resize‘, toBlur); text.blur(); }})(); </script>
6.目前新版瀏覽器不支援viewport中的禁止縮放和最大縮放值限制 阻止預設事件 7.多指操作的相容 安卓下沒有gestures事件，需要利用e.touches自己去封裝。
document.addEventListener(‘touchstart‘, function(e) { e.preventDefault();});/*init:{ el: 元素, start:fn, change:fn, end:fn}*/(function(){ var box = document.querySelector(‘#box‘); var startDeg = 0; var startScale = 0; css(box,"rotate",0); css(box,"scale",100); gesture({ el:box, start: function(e){ startScale = css(box,"scale")/100; startDeg = css(box,"rotate"); this.style.background = "blue"; }, change: function(e){ css(this,"scale",(e.scale * startScale)*100); this.innerHTML = e.rotation; css(box,"rotate",e.rotation + startDeg); }, end: function(e){ this.style.background = "red"; } });})();function gesture(init){ var el = init.el; var isGesture = false; var startDis = 0; var startDeg = 0; el.addEventListener(‘touchstart‘, function(e) { if(e.touches.length >= 2){ startDis = getDis(e.touches[0],e.touches[1]); startDeg = getDeg(e.touches[0],e.touches[1]); isGesture = true; init.start&&init.start.call(el,e); } }); el.addEventListener(‘touchmove‘, function(e) { if(isGesture&&e.touches.length >= 2){ isGesture = true; var nowDis = getDis(e.touches[0],e.touches[1]); var nowDeg = getDeg(e.touches[0],e.touches[1]); e.scale = nowDis/startDis;//縮放值 e.rotation = nowDeg - startDeg; init.change&&init.change.call(el,e); } }); el.addEventListener(‘touchend‘, function(e) { if(isGesture){ init.end&&init.end.call(el,e); } isGesture = false; }); } function getDis(Point,Point2){ return Math.sqrt((Point.pageX - Point2.pageX)*(Point.pageX - Point2.pageX) + (Point.pageY - Point2.pageY)*(Point.pageY - Point2.pageY));}function getDeg(Point,Point2){ var y = Point.pageY - Point2.pageY; var x = Point.pageX - Point2.pageX; return Math.atan2(y,x)/Math.PI*180;}
8.滑屏時的卡頓問題 阻止預設事件 9.transition移動端的閃屏問題 把外框變成3D的，一般情況下不會遇到。 10.使用了3d做動畫之後，3d元素下邊的文字失真的問題 給上面動畫的投影片什麼的外層加上絕對位置，定位裡面一層加上相對定位。 11.部分安卓下調用file，只能調用到相簿，不能調用網路攝影機 在input上加上一個caption屬性，但是如果是x5或者是ios瀏覽器下就會出現只能調到網路攝影機的問題，所以要加一個判斷，判斷瀏覽器的版本，如果是iso瀏覽器或者x5瀏覽器，就把加caption屬性這個renturn掉不加 12.audio的不能自動播放問題 給document加上.play() 13.如何判斷網路環境是無線還是流量 navigator裡面有所有和網路相關的東西
移動端的幾個面試小問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
