概述

以前在网上找过屏蔽右键菜单的代码，也找过屏蔽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. 6.Python enumerate 特性

    enumerate()可参考: list1 = ["这", "是", "一个", "测试"] for index,ite ...

  2. 资产管理平台 glpi

    1.安装apache yum install httpdyum install httpd-devel 2.安装php 3.配置apache支持php 4.下载glpi并解压 5.配置apache 6 ...

  3. Javascript面试题收集

    第一部分“ 来源: http://bbs.miaov.com/forum.php?mod=viewthread&tid=6974 1.var a = b = 1; ——这样定义变量的隐患 fu ...

  4. xadmin 常见错误

    版本: Django==2.0.5 xadmin==0.6.1 djangorestframework==3.9.0 1.No module named 'django.core.urlresolve ...

  5. Python设计模式 - UML - 用例图(Use Case Diagram)

    简介 用例图主要是从用户的角度出发对软件产品的功能及执行者进行描述的. 用例图是从需求分析到软件交付的第一步,图示化展示参与者与参与者之间.参与者与用例之间.用例与用例之间的关系,帮助开发人员更好的理 ...

  6. C++ 实现 split 操作

    理由:由于 C++ 标准库里面没有字符分割函数 split ,这可太不方便了,我们利用 STL 来实现自己的 split 函数: 原型:vector<string> split(const ...

  7. c++ 面试题(C/C++/STL)

    1,智能指针:auto_ptr(c++11 已经弃用),unique_ptr(用于取代 auto_ptr),  shared_ptr,  weak_ptr http://www.cnblogs.com ...

  8. PHP错误日志记录：display_errors与log_errors的区别

    我们所做的东西,无论在开发环境还是在生产环境都可能会出现一些问题. 开发环境下,我们会要求错误尽可能详细的呈现出来,错误提示信息越详细越好,越详细越能帮助开发人员确定问题所在并从根本上解决他们. 生产 ...

  9. [leetcode]11. Container With Most Water存水最多的容器

    Given n non-negative integers a1, a2, ..., an , where each represents a point at coordinate (i, ai). ...

  10. pythonj基础（五）元组和集合

    一,什么是元祖 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 1.创建一个空元组 tu ...