深入探讨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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JS定时器实例详细分析
Oct 11 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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
php实现四舍五入的方法小结
2015/03/03 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
php session_decode函数用法讲解
2019/05/26 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
javascript scrollTop正解使用方法
2013/11/14 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
javascript每日必学之循环
2016/02/19 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
js实现蒙版效果
2020/01/11 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
python实现五子棋小程序
2019/06/18 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python如何执行系统命令
2020/09/23 Python
详解Python中第三方库Faker
2020/09/25 Python
全陪导游欢迎词
2014/01/17 职场文书
剪彩仪式主持词
2014/03/19 职场文书
公积金具结保证书
2015/05/11 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python