深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制


Posted in Javascript onJune 10, 2014

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法。

由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制、右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScript实现的,另外一些手机应用也可以是由HTML5+JavaScript实现的,在这种情形下,限制右键就是有必要的了,因为作为APP来说,网页的右键选择文字及弹出菜单在大多数情况下显得没有必要了。

接下来介绍的可能只包含某一方面的代码,但是我相信大家一定能够举一反三:-)

一、粗暴版的限制选择复制或者禁止鼠标右键

我们先谈谈如何粗暴的限制或者禁止浏览者复制网页上的文字,正常的防止浏览者复制文字,我们肯定是想到禁用用户的某些特定的操作,比如鼠标右键,选择,复制等等,而这些操作对应了相应的脚本事件,只要给这些事件加上一个方法,让其返回false就可以“吃”掉这个操作了,一般粗暴的禁止复制的脚本代码如下:

window.onload = function() {
    with(document.body) {
      oncontextmenu=function(){return false}
      ondragstart=function(){return false}
      onselectstart=function(){return false}
      onbeforecopy=function(){return false}
      onselect=function(){document.selection.empty()}
      oncopy=function(){document.selection.empty()}
    }
}

为什么称这个方法为粗暴版的呢?因为使用这个方法禁止鼠标右键后你会发现网页上任何控件都无法右击或者选择了,网页似乎成了死板的图片,也许你会觉得无所谓,但是对于input、textarea文本框这类字符输入控件就有很大的关系了,这些地方不能限制用户的右键及选择复制操作。

二、合理判断要限制的HTML标签元素

如何判断当前处理的层所在的元素标签呢,也就是说得到鼠标当前所在的HTML Tag,这里我们以oncontextmenu为例,其实在document.body.oncontextmenu传入的函数有一个参数我们略去了,完整的写法应该是document.body.oncontextmenu=function(e){}这里的e是JavaScript中的Event事件对象,在IE中可能是通过window.event获取的。通过这个事件对象可以获取触发事件时鼠标所在的HTML Tag,我们可以判断是不是我们要忽略处理元素标签,这里我提供一个函数如下:

var isTagName = function(e, whitelists) {
      e = e || window.event;
      var target = e.target || e.srcElement;
      Array.prototype.contains = function(elem)
        {
           for (var i in this)
           {
               if (this[i].toString().toUpperCase() == elem.toString().toUpperCase()) return true;
           }
           return false;
        }
      if (whitelists && !whitelists.contains(target.tagName)) {
        return false;
      }
      return true;
};

这里的e是事件对象event,target是事件对象所引用的元素对象,当然这里两个变量都采取了兼容IE的写法,具体可以参考《How can I make event.srcElement work in Firefox and what does it mean?》;这里的whitelists是白名单HTML元素标签Tag名,比如['INPUT', 'TEXTAREA'],表示将输入文本框input和textarea加入判断,如果当前事件元素是的话就返回true,这样我们通过下面的代码可以选择性的屏蔽鼠标右键了:

document.body.oncontextmenu=function(e){
     return isTagName(e, ['A', 'TEXTAREA']);
}

三、JQuery版的选择性屏蔽禁止文本选择

同样的对于其他的操作也可以选择性的屏蔽,在JQuery支持的环境中我在StackOverflow找到了这么一篇文章《How to disable text selection using jQuery?》,虽然是讲解的禁止选择的,不过可以借鉴一下,具体代码如下:

(function($){  $.fn.ctrlCmd = function(key) {
    var allowDefault = true;
    if (!$.isArray(key)) {
       key = [key];
    }
    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};
 
$.fn.disableSelection = function() {
    this.ctrlCmd(['a', 'c']);
    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};
})(jQuery);

在使用上采取下面的代码:
$(':not(input,select,textarea)').disableSelection();

这样就可以除去input、select、textarea外禁止选择了,这段代码的技巧是除了采取selectstart外还给相关元素添加了某些特殊浏览器支持的CSS特性,这样基本可以实现大多数浏览器的兼容,同时这段代码还屏蔽了键盘按键选择Ctrl+A和Ctrl+C,不得不佩服作者周到的考虑。

四、进一步完善:屏蔽鼠标点击操作

我在测试这段代码时遇到一个问题就是点击除input、select、textarea外的元素时会全部选择页面,原文作者给出一个简单的方法就是在使用代码上附加.on('mousedown', false),这样就屏蔽了鼠标的单击,使用代码变成如下:

$(':not(input,select,textarea)').disableSelection().on('mousedown', false);

但是问题又来了,我发现采取上述代码后,input,select,textarea也开始变得不正常起来,看样子屏蔽mousedown的特性应用到所有元素上了。现在转换一下思路,结合刚才我提出的方案,判断event对象来实现选择性屏蔽,我将代码修正如下:
$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
    var event = $.event.fix(e);
    var elem = event.target || e.srcElement;
    if (elem.tagName.toUpperCase() != 'TEXTAREA' && elem.tagName.toUpperCase() != 'INPUT') {
        e.preventDefault();
        return false;
    }
    return true;
});

这样textarea和input就不会限制mousedown了,我们将这段代码抽出为函数:
function jQuery_isTagName(e, whitelists) {
      e = $.event.fix(e);
      var target = e.target || e.srcElement;
      if (whitelists && $.inArray(target.tagName.toString().toUpperCase(), whitelists) == -1) {
        return false;
      }
      return true;
}$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
        e.preventDefault();
        return false;
    }
    return true;
});

五、JQuery版的选择性屏蔽禁止鼠标右键

对于右键菜单,我们可以这样处理:

$(document).bind("contextmenu",function(e){
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
        e.preventDefault();
        return false;
    }
    return true;
});
Javascript 相关文章推荐
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
domReady的实现案例
Nov 23 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
js实现抽奖功能
Nov 24 Javascript
js换图片效果可进行定时操作
Jun 09 #Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 #Javascript
javascript 处理null及null值示例
Jun 09 #Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 #Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 #Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 #Javascript
Node.js(安装,启动,测试)
Jun 09 #Javascript
You might like
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
JQuery从头学起第一讲
2010/07/04 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
python的Template使用指南
2014/09/11 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python调用百度语音识别api
2018/08/30 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python socket处理client连接过程解析
2020/03/18 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
django使用graphql的实例
2020/09/02 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
大学生求职工作的自我评价
2014/02/13 职场文书
幼儿教师国培感言
2014/02/19 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
护理心得体会范文
2016/01/22 职场文书
标准发言稿结尾
2019/07/18 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android