概述

以前在网上找过屏蔽右键菜单的代码，也找过屏蔽F12的代码，今天无意之中看到别人的右键菜单很有意思，我也想来搞一个。

思路

  1. 建立一个菜单并且隐藏起来。
  2. 用window.oncontextmenu屏蔽鼠标右键的默认事件。
  3. 判断鼠标点击事件的类型，如果为右键则在把菜单显示并且移动到鼠标位置。
  4. 点击鼠标左键时，隐藏菜单。

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <style>

        li {

            cursor: pointer;

        }

        li:hover {

            text-decoration: underline;

        }

    </style>

</head>

<body style="position: relative;">

<div style="background-color: grey; width: 500px; height: 500px;"></div>

<ul class="right" style="display: none;position: absolute;border: 1px solid green">

    <li>喵喵！！</li>

    <li>不准偷看</li>

    <li>关于本站</li>

</ul>

<script type="text/javascript">

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

    $('body').mousedown(function(event) {

        if (event.which === 3) {

            $('.right').css({ 'display': 'block', 'top': event.pageY + 'px', 'left': event.pageX + 'px' });

        }

    });

    $('body').click(function(event) {

        $('.right').css({ 'display': 'none' });

    });

</script>

</body>

</html>

运行测试

Document
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

li {
cursor: pointer;
}
li:hover {
text-decoration: underline;
}

  • 喵喵！！
  • 不准偷看
  • 关于本站

<script>

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

$('body').mousedown(function(event) {

if (event.which === 3) {

$('.right').css({ 'display': 'block', 'top': event.pageY + 'px', 'left': event.pageX + 'px' });

}

});

$('body').click(function(event) {

$('.right').css({ 'display': 'none' });

});

</script>

其它

有一个小bug，就是当把那个长宽500px的div删掉时，就不会触发事件了，原因不明。

不是position的问题，因为我把这个div的长宽设置为1px后，在远离它的地方点击不会触发事件，在靠近它的地方点击则会触发事件。

哈哈，原因找到了！并不是没有触发事件，而是因为html的body没有被撑开，所以不能把这个div通过绝对定位移动到body以外。

实测，去掉这个div，然后给body加上这个样式style="width: 100%; height: 2000px;"就可以了。

用jQuery修改右键菜单的更多相关文章

  1. 怎样在Windows资源管理器中添加右键菜单以及修改右键菜单顺序

    有时,我们需要在Windows资源管理器的右键菜单中添加一些项,以方便使用某些功能或程序. 比如我的电脑上有一个免安装版的Notepad++,我想在所有文件的右键菜单中添加一项用Notepad++打开 ...

  2. 实现JQuery EasyUI右键菜单变灰不可用效果

    使用过EasyUI的朋友想必都知道疯狂秀才写的后台界面吧,作为一个初学者我不敢妄自评论它的好坏,不过它确实给我们提供了一个很好框架,只要在它的基础上进行修改,基本上都可以满足我们开发的需要. 知道“疯 ...

  3. jquery实现右键菜单

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  4. [xPlugins] jQuery Contextmenu右键菜单

    [2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜 ...

  5. jQuery EasyUI 右键菜单--关闭标签/选项卡

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", func ...

  6. jquery 自定义右键菜单

    如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...

  7. jQuery自定义右键菜单

    首先看下效果,效果在最下面: 代码: body { font-size: 12px; margin: 0px; padding: 0px; } form,div,ul,li { margin: 0px ...

  8. (转)jQuery禁止右键菜单，全选

    本文转载自:http://www.cnblogs.com/lucker/archive/2012/09/21/2696464.html $("body").bind("c ...

  9. Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...

随机推荐

  1. 使用jQuery+huandlebars遍历数组嵌套数组

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  2. JS 正则表达式基本语法(精粹)

    1.正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束. 例子如下: "^The":表示所有以"The"开始的字符串( ...

  3. ELK Redis高性能加速

    1.下载redis并安装好 wget http://download.redis.io/releases/redis-2.8.13.tar.gz tar zxf redis-.tar.gz cd re ...

  4. 关于extern的使用

    学的时候不认真总结,用的时候就一堆bug. 上回也是调extern调了半天,今天又犯老毛病. data 比如说是要用到的的在main函数中不断刷新的量.那么这个unsigned int data 要写 ...

  5. Linux基础知识回顾及BASH学习

    2019-2020-030189224 <网络攻防技术与实践>第一周学习总结 Linux基础知识错题回顾 1.Linux中使用(B)命令新建空白文件. A .mkdir B .touch ...

  6. React Context（一）：隐式传递数据

    一 Context概述 Context provides a way to pass data through the component tree without having to pass pr ...

  7. 安装Ubuntu 18.04后的一些操作

    安装Ubuntu 18.04后的一些操作 1.设置root密码 sudo passwd 2.登陆root(输入密码后看到井号就是切换成为root账户) su 3.删除预装 apt-get remove ...

  8. 解决在jupyter notebook中遇到的ImportError: matplotlib is required for plotting问题

    昨天学习pandas和matplotlib的过程中, 在jupyter notebook遇到ImportError: matplotlib is required for plotting错误, 以下 ...

  9. Blast

    NCBI 教程:https://www.ncbi.nlm.nih.gov/books/NBK279681/ 本地使用 blast 的步骤 1. 构建本地数据库索引 $makeblastdb -in h ...

  10. linux下反弹shell

    01 前言 CTF中一些命令执行的题目需要反弹shell,于是solo一波. 02 环境 win10      192.168.43.151       监听端    装有nc kali        ...