web前端——移动端知识的一些总结(JS)

1.如果使用 jquery绑定 touch事件的话，获取 touchstart， touchmove的触点坐标用 e.originalEvent.targetTouches[0].pageX，获取 touchend则用 e.originalEvent.changedTouches[0].pageX 2.利用 style获取获取 transform的 rotate

1. 值

parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])如果页面一开始没有`style`值，`rotate`是写在`CSS`里的，需要用到`getComputedStyle`，具体请看[这里][5]

3.有些版本的 iphone4中， audio和 video默认播放事件不会触发，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放，比如

$(document).one('touchstart',function(){ audio.play();})

4.想要在 touchmove:function(e,参数一)加一个参数，结果直接使用 e.preventDefault()就会 e 报错，处理方法为

touchmove:function(e,参数一){　　var e=arguments[0] e.preventDefault()}

5.移动端的一些小页面可能没必要用到 zepto.js这些工具库，就可以使用一些新一点的 api，比如选取元素用 querySelector(".class #id")和 querySelectorAll(".class element"),操作 class可以用 classList

6.点击一个元素时，使用 touchstart会立即触发，而使用 click则用有大概 0.3s的延迟 想模拟一个立即触发的点击事件有两种方法， fastclick.js和 zepto.js里的 tap事件。

不过 zepto的 tap事件有一个事件穿透的问题。假如你 tap一个弹出层元素（这个元素遮罩了一个 a标签），这个元素立即消失，这样由于上述的 0.3s延迟 tap事件就会传递给 a标签成 click事件造成a标签跳转。 以上面的例子来说，解决方案视情况而定：

① tap时让遮罩渐隐消失，这个过程超过 400ms就不会穿透到下一层去了

② 在 touchend事件回调中加入 preventDefault, 并在下一层中加上 pointer-events:none。（这个没用过）

③ 有的时候比如弹出一个 iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定 touchend也是和 tap差不多的效果

7.当弹窗出现时，想禁止屏幕的滑动，给那个遮罩层添加 touchmove事件即可，用 e.preventDefault()会阻止的 scroll， click等事件，消失时再 off掉，

$(".body_cover").on("touchmove", function(e) { e.preventDefault();});

8.使用 input file上传文件时，可以指定接受的类型， accept="image/png,image/jpeg,image/gif" ，同时在 android上默认不能使用相机，可以加 capture="camera" 同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。

9.给元素加:active伪类时，如果要求高，兼容性好的话，就得用js监控touchstart然后加相应的class

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