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. })