Javascript 浏览器兼容笔记——开启和禁用Event返回值

　　近期在开发一款Html5游戏，主要使用Javascript语言开发，开发过程中遇到一点浏览器兼容问题，特意记录如下：

　　问题背景：开发的这款游戏 画布大小为480X800，放置在页面中时，游戏画布高度加上页面原本内容的高度超出了浏览器显示高度，因而出现了滚动条。问题是游戏使用键盘操作（上下左右键），为了获取键盘事件，需要为window注册keydown和keyup事件，即window.addEventListener("keyup/keydown",function A(){...});在该函数中添加处理游戏的逻辑后，当按下“上”或“下”按键时，除了进行预想的游戏逻辑操作外，浏览器还进行了另外的处理（上下滚动页面），造成了很不好的用户体验。

　　需要解决的问题：根据上述背景，我要解决的问题是，当在游戏中按下“上、下、左、右”按键时，屏蔽原来浏览器的操作，使得只进行我想要的处理。

　　解决：在网上寻找方法，发现可以用returnValue将返回值屏蔽，因而，将上述函数A改为如下形式：

function A(e){
        switch(e.keyCode){
        case Q.KEY.LEFT:
            e.returnValue = false;
            break;
        case Q.KEY.RIGHT:
            e.returnValue = false;
            break;
        case Q.KEY.UP:
            e.returnValue = false;
            break;
        case Q.KEY.DOWN:
            e.returnValue = false;
            break;
        }
    };

　　测试了遨游浏览器、IE浏览器（IE10）以及使用IE内核的浏览器（360），结果正常，但是发在火狐浏览器中还是原来那样，使用firebug工具进行调试，结果发现，firefox不支持e.returnVaule属性，只有另寻它法。花了一下午事件各种search，终于找到了解决方式，在ff中使用e.preventDefault()函数，可以屏蔽原来的处理，因而新的代码如下：

function A(e){
        switch(e.keyCode){
        case Q.KEY.LEFT:
            if(e.returnValue)e.returnValue = false;
            else e.preventDefault();
            break;
        case Q.KEY.RIGHT:
            if(e.returnValue)e.returnValue = false;
            else e.preventDefault();
            break;
        case Q.KEY.UP:
            if(e.returnValue)e.returnValue = false;
            else e.preventDefault();
            break;
        case Q.KEY.DOWN:
            if(e.returnValue)e.returnValue = false;
            else e.preventDefault();//firefox 支持
            break;
        }
    };

　　在包括FF、IE10、遨游、Chrome、Safari等主流浏览器中测试，均达到我想要的效果。问题解决，将此过程记录下来，以后可以查询。