Javascript 浏览器兼容笔记——开启和禁用Event返回值
近期在开发一款Html5游戏,主要使用Javascript语言开发,开发过程中遇到一点浏览器兼容问题,特意记录如下:
问题背景:开发的这款游戏 画布大小为480X800,放置在页面中时,游戏画布高度加上页面原本内容的高度超出了浏览器显示高度,因而出现了滚动条。问题是游戏使用键盘操作(上下左右键),为了获取键盘事件,需要为window注册keydown和keyup事件,即window.addEventListener("keyup/keydown",function A(){...});在该函数中添加处理游戏的逻辑后,当按下“上”或“下”按键时,除了进行预想的游戏逻辑操作外,浏览器还进行了另外的处理(上下滚动页面),造成了很不好的用户体验。
需要解决的问题:根据上述背景,我要解决的问题是,当在游戏中按下“上、下、左、右”按键时,屏蔽原来浏览器的操作,使得只进行我想要的处理。
解决:在网上寻找方法,发现可以用returnValue将返回值屏蔽,因而,将上述函数A改为如下形式:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function A(e){ 2 switch(e.keyCode){ 3 case Q.KEY.LEFT: 4 e.returnValue = false; 5 break; 6 case Q.KEY.RIGHT: 7 e.returnValue = false; 8 break; 9 case Q.KEY.UP: 10 e.returnValue = false; 11 break; 12 case Q.KEY.DOWN: 13 e.returnValue = false; 14 break; 15 } 16 };
测试了遨游浏览器、IE浏览器(IE10)以及使用IE内核的浏览器(360),结果正常,但是发在火狐浏览器中还是原来那样,使用firebug工具进行调试,结果发现,firefox不支持e.returnVaule属性,只有另寻它法。花了一下午事件各种search,终于找到了解决方式,在ff中使用e.preventDefault()函数,可以屏蔽原来的处理,因而新的代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function A(e){ 2 switch(e.keyCode){ 3 case Q.KEY.LEFT: 4 if(e.returnValue)e.returnValue = false; 5 else e.preventDefault(); 6 break; 7 case Q.KEY.RIGHT: 8 if(e.returnValue)e.returnValue = false; 9 else e.preventDefault(); 10 break; 11 case Q.KEY.UP: 12 if(e.returnValue)e.returnValue = false; 13 else e.preventDefault(); 14 break; 15 case Q.KEY.DOWN: 16 if(e.returnValue)e.returnValue = false; 17 else e.preventDefault();//firefox 支持 18 break; 19 } 20 };
在包括FF、IE10、遨游、Chrome、Safari等主流浏览器中测试,均达到我想要的效果。问题解决,将此过程记录下来,以后可以查询。