整理一下嵌入式WEB开发中的各种屏蔽

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;
    }
}

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。