移动端js知识总结

Posted 2020-08-21 百年美

　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");
        }
    });