深入讨论javascript、jQuery屏幕鼠标右键菜单和禁止选择复制的问题。

我记得在接触动态HTML和Javascript开始有与屏幕上的脚本代码鼠标右键接触,该代码将被用于预防许多游客没有页面的副本允许文本或其他内容,然后实际应用证明,这种方法是不符合用户体验,但同时破解的方法有很多,例如,我曾经写过一篇文章解释了如何解除禁令复制到。

因此,限制右键复制是不明智的,但我还是想谈谈今天是禁止的复制、右键菜单的东西,因为随着软件技术的发展,Web应用和桌面应用程序之间的界线变得越来越模糊,一些桌面程序实际上是由Javascript网页。其他一些手机应用程序也可以通过HTML5实现,在这种情况下,有必要限制正确的密钥,因为作为应用程序,右键单击页面文本和弹出菜单在大多数情况下是没有必要的。


下一个介绍可能只包含代码的一个方面,但我相信您也可以这样做。—


选择复制或禁止鼠标右键的限制的粗略版本。

我们首先讨论如何限制或禁止对网页文本浏览复制粗鲁,防止正常浏览复制文本,我们必须想出一些具体操作禁用的用户,如鼠标右键,选择、复制等,这些操作对应于相应的脚本事件,只要这些事件加上一个返回错误的方法,你可以吃这个,一般残酷的禁止复制脚本代码如下:
复制代码代码如下所示:
在window.onload =函数(){
用(文档体){
OnContextMenu =函数(){ return false }
ondragstart =函数(){ return false }
onselectstart =函数(){ return false }
onbeforecopy =函数(){ return false }
onselect =函数(){ document.selection.empty()}
oncopy =函数(){ document.selection.empty()}
}
}
你为什么说这是一个粗略的版本因为使用这种方法从鼠标右按钮之后,你会发现网页上的任何控件,可以右键单击或选择,似乎是一个刚性的图片,你可能认为这并不重要,但对输入文本的文本框,这种字符输入的控制将有很大的关系,右键单击并选择这些地方用户可以限制复制操作。

二、合理判断HTML标记元素是否受限制

如何确定当前处理层中的元素的标签,也就是说老鼠的HTML标记的当前位置,这里我们以OnContextMenu为例,事实上,有一个传入的参数的document.body.oncontextmenu我们省略的功能完整的措辞应该文件。身体。OnContextMenu =功能(e){ }其中E是Javascript中的伊江事件对象,可以由window.event.through这个事件对象得到的,我们可以得到鼠标的HTML标签时,触发事件。我们可以判断是否忽略了处理元素的标签。这里我提供如下函数:

复制代码代码如下所示:
无功istagname =功能(E,白名单){
E = e window.event | |;
VaR目标= e.target e.srcelement | |;
array.prototype.contains =功能(元)
{
因为(我在此中)
{
如果(这{我} ToString()。toUpperCase)(元。toString()。toUpperCase)=(回报)真的;
}
返回false;
}
如果(白名单!Whitelists.contains(目标。tagname)){
返回false;
}
返回true;
};



其中E是事件对象的事件,目标是元素对象引用的对象,当然,这里的两变量采取的具体写法兼容IE,可以参考如何在Firefox event.srcelement工作是什么意思白名单;这里是白名单的HTML元素标签的标签,如{输入''textarea},输入文本,表示文本框将被添加到确定当前活动单元的输入,然后返回true,右点击下面的代码,所以我们可以选择性的:
复制代码代码如下所示:
文件。身体。OnContextMenu =功能(e){
返回istagname(E,{'a','textarea});
}



三,jQuery版本的选择性筛选禁止文本选择

同时屏蔽其他操作也可以选择,用jQuery的环境支持,我觉得这样的一篇文章如何禁用文本选择使用jQuery计算器,虽然它是在选择禁止,但你可以了解具体的代码如下:
复制代码代码如下所示:
(函数($){)

美元。fn.ctrlcmd =功能(关键){

无功allowdefault =真;

如果(!美元。ISArray(关键)){
密钥=密钥};
}

返回this.keydown(功能(e){
对于(var i = 0,L = key.length;i < L;i++){
如果(能)。CharCodeAt(关键{我},{ e.metakey toUpperCase = = =(0))
allowdefault = false;
}
};
返回allowdefault;
});
};


美元。fn.disableselection =函数(){

This.ctrlCmd({'a',c});

返回this.attr('unselectable ',' ')
CSS({-moz用户选择':' -moz无,
用户选择:没有人要的,
没有人o-user-select ':',
用户选择:不关的KHTML,
用户选择:不关的WebKit,
MS用户选择:不关,
用户选择:不关})
。绑定('selectstart,假);
};

}(jQuery);
使用下面的代码:
复制代码代码如下所示:
$(':不(输入、选择、文本)的DisableSelection());

这样你可以删除输入,选择,文本的选择,此代码是另外的selectstart技能和相关元素的添加一些特殊的浏览器支持的CSS特性,这可以实现与大多数浏览器兼容,但此代码还屏蔽键盘按键来选择Ctrl + A和Ctrl + C,不得不佩服作者缜密的思考。

四,进一步改进:屏幕鼠标单击操作

将所有选择页面,我遇到一个问题,在测试这段代码除了输入、选择、文本的元素外,作者给出了一个简单的方法是使用添加。代码('mousedown,false),从而屏蔽鼠标点击,使用下面的代码:
复制代码代码如下:$(':不(输入、选择、文本)),DisableSelection(),('mousedown,假);
但问题又来了。我发现输入,选择和文本开始采取上述代码后变得异常。看来,屏蔽鼠标的特点是适用于所有元素。现在,转变观念,结合我刚刚提出了判断事件对象实现选择性屏蔽方案,我修改代码如下:
复制代码代码如下所示:
$(':不(输入、选择、文本)),DisableSelection(),('mousedown功能(e){)
风险事件=美元。event.fix(E);
var elem = event.target e.srcelement | |;
如果(elem.tagname.touppercase()!= 'textarea' elem.tagname.touppercase()!=输入){
E.preventDefault();
返回false;
}
返回true;
});
所以文本和输入不会限制鼠标,我们把这个作为一个功能的代码:
复制代码代码如下所示:
功能jquery_istagname(E,白名单){
E =美元。event.fix(E);
VaR目标= e.target e.srcelement | |;
如果(白名单美元。内部数组(目标。tagname ToString()。toUpperCase),(白名单)= = 1){
返回false;
}
返回true;
}

$(':不(输入、选择、文本)),DisableSelection(),('mousedown功能(e){)
如果(!jquery_istagname(E,{输入,'textarea ' })){
E.preventDefault();
返回false;
}
返回true;
});

五,jQuery版本的选择性屏蔽禁止鼠标右键

对于右键菜单,我们可以处理这个问题:
复制代码代码如下所示:
$(document)。Bind(菜单
如果(!jquery_istagname(E,{输入,'textarea ' })){
E.preventDefault();
返回false;
}
返回true;
});