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