Javascript 浏览器兼容笔记——开启和禁用Event返回值
近期在开发一款Html5游戏，主要使用Javascript语言开发，开发过程中遇到一点浏览器兼容问题，特意记录如下：
问题背景：开发的这款游戏 画布大小为480X800，放置在页面中时，游戏画布高度加上页面原本内容的高度超出了浏览器显示高度，因而出现了滚动条。问题是游戏使用键盘操作（上下左右键），为了获取键盘事件，需要为window注册keydown和keyup事件，即window.addEventListener("keyup/keydown",function A(){...});在该函数中添加处理游戏的逻辑后，当按下“上”或“下”按键时，除了进行预想的游戏逻辑操作外，浏览器还进行了另外的处理（上下滚动页面），造成了很不好的用户体验。
需要解决的问题：根据上述背景，我要解决的问题是，当在游戏中按下“上、下、左、右”按键时，屏蔽原来浏览器的操作，使得只进行我想要的处理。
解决：在网上寻找方法，发现可以用returnValue将返回值屏蔽，因而，将上述函数A改为如下形式：
View Code
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()函数，可以屏蔽原来的处理，因而新的代码如下：
View Code
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等主流浏览器中测试，均达到我想要的效果。问题解决，将此过程记录下来，以后可以查询。
