DOM选择器
html5为了我们提供了一个非常好的DOM选择器，就是document.querySelector和document.querySelectorAll这两个方法，这两个方法在android2.1+以及ios3+以后，都可以使用，其接受的参数为css选择器。在实际web开发中，有一部大部分工作会用到DOM的操作，通过这个神器，可以解决大多数的DOM的操作。建议大家使用的时候，可以多多使用这两个方法。
其他的DOM的选择器的兼容性并不是太好，建议不要使用。
库和框架
对于jquery大家应该比较的熟悉，在web手机上也有一个轻量级的类库工具，那就是Zepto，它的很多api接口保持和jquery的接口兼容，其体积非常小，gzip的包在10k左右，非常适合在手机上的无线环境中加载。建议大家在使用类库的时候，推荐使用，其api地址为:http://zeptojs.com/
对于框架，我们熟悉的Angular以及比较新的vue、react等也都可以使用
click的300ms延迟响应
说到移动开发，不得不说一下这个click事件，在手机上被叫的最多的就是点击的反应慢，就是click惹出来的事情。情况是在这样，在手机早期，浏览器有系统级的放大和缩小的功能，用户在屏幕上点击两次之后，系统会触发站点的放大/缩小功能。不过由于系统需要判断用户在点击之后，有没有接下来的第二次点击，因此在用户点击第一次的时候，会强制等待300ms，等待用户在这个时间内，是否有用户第二次的提交，如果没有的话，就会click的事件，否则就会触发放大/缩小的效果。
这个设计本来没有问题，但是在绝大多数的手机操作中，用户的单击事件的概率大大大于双击的，因此所有用户的点击都必须要等300ms，才能触发click事件，造成给用户给反应迟钝的反应，这个难以解决。业界普遍解决的方案是自己通过touch的事件完成tap，替代click。不过tap事件来实际的应用中存在下面所说的问题。
好消息是，就是手机版chrome21.0之后，对于viewport width=device-width，并且禁止缩放的设置，click点击取消了300ms的强制等待时间，这个会使web的响应时间大大提升。但ios仍然存在这个问题。
移动事件
javascript有很多用户交互相关事件，在移动上有一些比较特有的事件，大家在日常开发中，可能会接触到，这些事件的特性，这里说一下：
- orientationchange 这个事件是在当设备发生旋转的时候，发生的事件。这个在某些场合会非常的实用。
- touchstart、touchmove、touchend、touchcancel等四个触摸事件，在所有移动web的中，都支持这四个事件。通过这两个事件，可以模拟出各种用户的手势，不过由于其处理比较复杂，可能模拟最多的是tap事件。很多web移动类库，都有tap的事件的实现，不过从实践中，tap都不是处理的很好，tap的主要问题，有两个，一个是tap和滚动同时触发的时候，往往会触发tap事件，二是tap的敏感度，经常会失误触发tap。
- scroll事件 这个事件在PC上的触发时机和手机上的触发时机不同，scroll事件在手机上，只有在滚动停止的时候才会发生,因此这个事件在移动端用的比较少，因为触发的时机已经晚了。对于需要在移动中，改变页面结构的功能，用scroll是无法完成的。
手势事件
- touchstart //当手指接触屏幕时触发
- touchmove //当已经接触屏幕的手指开始移动后触发
- touchend //当手指离开屏幕时触发
- touchcancel
触摸事件
- gesturestart //当两个手指接触屏幕时触发
- gesturechange //当两个手指接触屏幕后开始移动时触发
- gestureend
屏幕旋转事件
- onorientationchange
检测触摸屏幕的手指何时改变方向
- orientationchange
touch事件支持的相关属性
- touches
- targetTouches
- changedTouches
- clientX // X coordinate of touch relative to + the viewport (excludes scroll offset)
- clientY // Y coordinate of touch relative to + the viewport (excludes scroll offset)
- screenX // Relative to the screen
- screenY // Relative to the screen
- pageX // Relative to the full page (includes scrolling)
- pageY // Relative to the full page (includes scrolling)
- target // Node the touch event originated from
- identifier // An identifying number, unique to each touch event
- 屏幕旋转事件：onorientationchange
判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};};
添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
双手指滑动事件：
// 双手指滑动事件
addEventListener('load',
function(){window.onmousewheel = twoFingerScroll;},
false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作
return true;
};
网友评论