移動端js知識總結

標籤：16px   ddc   start   java   方法   and   android   :active   jpeg   

　1.如果使用jquery綁定touch事件的話，擷取touchstart，touchmove的觸點座標用 e.originalEvent.targetTouches[0].pageX，

擷取touchend則用 e.originalEvent.changedTouches[0].pageX

　2.有些版本的iphone4中， audio和video預設播放事件不會觸發

　　　　比如使用window.onload或計時器等都不能觸發播放，必須用JS寫事件讓使用者手動點擊觸發才會開始播放，比如

　　　　$(document).one(‘touchstart‘,function(){    　　　　audio.play();　　　　})
3.想要在touchmove:function(e,參數一)加一個參數，結果直接使用e.preventDefault()就會 e 報錯，處理方法為

　　touchmove:function(e,參數一){　　　　var e=arguments[0];      　　e.preventDefault();　　}
4.點擊一個元素時，使用touchstart會立即觸發，而使用click則用有大概0.3s的延遲
　　想類比一個立即觸發的點擊事件有兩種方法，fastclick.js和zepto.js裡的tap事件
5.不過zepto的tap事件有一個事件穿透的問題。
假如你tap一個彈出層元素（這個元素遮罩了一個a標籤），這個元素立即消失，這樣由於上述的0.3s延遲tap事件就會傳遞給a標籤成click事件造成a標籤跳轉。
以上面的例子來說，解決方案視情況而定：
① tap時讓遮罩漸隱消失，這個過程超過400ms就不會穿透到下一層去了
② 在touchend事件回調中加入preventDefault, 並在下一層中加上pointer-events:none。（這個沒用過）
③ 有的時候比如彈出一個iphone上滑動出來的層，點擊黑色半透明地區彈出層消失，這種可以在黑色地區綁定touchend也是和tap差不多的效果

　　1.當彈窗出現時，想禁止螢幕的滑動，給那個遮罩層添加touchmove事件即可，用e.preventDefault()會阻止的scroll，click等事件，消失時再off掉，

　　$(".body_cover").on("touchmove", function(e) {    　　e.preventDefault();　　});
　2.使用input file上傳檔案時，可以指定接受的類型，accept="image/png,image/jpeg,image/gif" ，
　　同時在android上預設不能使用相機，可以加capture="camera"
　　同時，由於原生的樣式不好看，可以通過設定input的display:none,然後使用id.click()去觸發input元素的點擊。
　3.給元素加:active偽類時，如果要求高，相容性好的話，就得用js監控touchstart然後加相應的class

　　$(document).on("touchstart", function(e) {        var target = $(e.target);        if (target.hasClass("is_hover")) {            target.addClass("hover_css");        }    });

 

移動端js知識總結