WAP端 经验记录1

1. 点击元素触发事件的先后顺序：touchstart, touchend, mousedown, mouseup, click

2. Animate 的 stop 问题
问题：手机端由于用 CSS3 做动画，所以 zepto 没有 stop 方法。
解决：我已自定义扩展了一个方法，目前支持动画 2d transform 和top 和 left 的停止，不支持@keyframe 和 3D。

3. 声音问题
问题1：对于IOS 的手机，如果想在游戏的结尾出结果的声音;
解决：当用户点击游戏“开始按钮”，调用结果声音的play()然后pause()；
不能用 zepto 的 tap去绑定执行 pause, 因为 tap方法里面用了 setTimeout延迟
问题2: 安卓手机有的时候声音会进入死循环播放。
解决：调用下声音的 .load()方法再.pause() 或者 .load()方法再.play()。

4. rem
问题：为了能像PC端一样随心所欲的切 640宽度下的页面
解决：先约定好：对于 640px 下的 html 根元素定义 font-size: 100px, 然后在页面的 head 加入以下代码, 那么当一个元素是 10px 时，你只要写成 0.1rem，方便快捷。

var fitPage = function(){
    var w = $('html').width();
    w = w > 640 ? 640: w;
    var newW = w/640 * 100;
    $('html').css({
     fontSize: newW
    });
}
fitPage();

 

5: 判断是否是手持设备
本来偶是写 'ontouchstart' in window, 参考了下 jQuery mobile，改成'ontouchend' in document

6: 在Android 手机上的 chrome 浏览器有个BUG, 给某个元素绑定 touchstart 属性，并且代码里写了 e.preventDefault(); 那么当你用手触碰这个元素 并且不放开的时候会一直触发touchmove 事件，正常应该是不会触发touchmove事件。所以还是得根据手在屏幕中移动的距离来判断 是否用户触发了touchmove事件，来知道用户是在滑动屏幕还是在点击一个元素。

$('.el').on('touchstart', function(e){
    e.preventDefault();
})
.on('touchmove', function(){
    console.log('trigger touchmove'); // it will always trigger it.
})

 

7: UC 浏览器下click事件优化过

正常点击一个元素, 先触发 touchend 后触发click, 但是当 touchend 里执行的代码放到 setTimeout 里面以后, click 里代码先执行了。

$('.m').on('touchend', function(){
    setTimeout(function(){
        console.log('touchend');
    }, 0);
});

$('.m').click(function(){
    console.log('click');
});