整理一下嵌入式WEB开发中的各种屏蔽(转)-CSDN博客

http://imochen.com/tidy-up-the-embedded-web-development-in-a-variety-of-shielding.html

每次做客户端WEB页，总会遇到QA提出的BUG，“F5没屏、右键菜单没屏、怎么还能选中呢、我去。你屏蔽了选择、这input里面的内容也不能选了，这不科学。你看，你看，我可以把这个图片托到桌面”。可能，以后，再也听不到这种声音了。。。不是QA挂了，是我有对策了，哈哈。

为什么要屏蔽各种热键

在嵌入式WEB中，要高仿原生的效果，所以，网页上的这些热键就显得不那么和谐了。还好，有js，我们可以轻松的干掉这些不想要的东西。但是即使这样，还是会有这样那样的问题，那我们就一起来看一下，怎么搞

屏蔽热键刷新

一般我们想到的就是F5，Ctrl + F5，为了保险起见，我们把Ctrl + R也加上,不知道大家有没有遇到这种情况。Ctrl + N的时候在IE下就重新开了一个浏览器打开了当前页面。这个虽然不是刷新，但是也归类到这里里面。顺手把这个干掉，代码如下，keyCode大家可以对应一下。反正我也记不住，每次都打出来看看。

var event = e || window.event;
var k = event.keyCode; if((event.ctrlKey == true && k == 82) || (event.ctrlKey == true && k == 78) || (k == 116) || (event.ctrlKey == true && k == 116)) { event.keyCode = 0; event.returnValue = false; event.cancelBubble = true; return false; }

右键这个必须屏掉

就目前遇到的，右键分为flash上的和页面上的。其实这个我没做测试。我个人猜测，flash不在文档流的时候，右键是独立的。不过,一般做嵌入式的时候，都会把flash处理一下，所以这个问题不大。右键屏蔽就比较简单了。

document.oncontextmenu = function(){
    return false; };

禁止拖拽

同样简单的还有拖拽，就不解释了。开始拖拽的时候return false就可以了

document.ondragstart = function(){
    return false; };

屏蔽了选中

不允许用户用鼠标来选中内容，但是如果是在input或者是textarea上的时候，是可以选择的，

document.onselectstart = function( e ){
    //屏蔽选择，textarea 和 input 除外
    var event = e || window.event;
    var tagName = ''; try{ tagName = (event.target || event.srcElement).tagName.toLowerCase(); } catch(e){} if( tagName != 'textarea' && tagName != 'input'){ return false; } }

a标签强制新窗口

document.onclick = function( e ){
    //屏蔽 Shift + click Ctrl + click

    var event = e || window.event;

    var tagName = ''; try{ tagName = (event.target || event.srcElement).tagName.toLowerCase(); } catch(e){} if( (event.shiftKey || event.ctrlKey) && tagName == 'a' ){ event.keyCode = 0; event.returnValue = false; event.cancelBubble = true; return false; } }