概述

以前在网上找过屏蔽右键菜单的代码，也找过屏蔽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. 剑指offer例题——用两个栈实现队列

    题目:用两个栈来实现一个队列,完成队列的Push和Pop操作.队列中的元素为int类型. 首先是概念理解,栈和对列存取的区别 栈(stack)是一种后进先出(last in first out, LI ...

  2. # 20175213 2018-2019-2 《Java程序设计》第2周学习总结

    ## 教材学习内容总结 在第二周的学习过程中,我学习了第二章和第三章的内容.第二章中,我学习了基本数据类型和类型转换运算以及与C语言有着相同和不同的数组.标识符由字母,下划线,美元符号和数字组成,并且 ...

  3. Django中的class Meta

    元数据 class Meta做为嵌套类,主要目的是给上级类添加一些功能,或者指定一些标准 # 格式化  将返回的结果自定义 def __str__(self) rerurn self.username ...

  4. Echarts 饼状图自定义颜色

    今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...

  5. chrome.debugger

    官网: https://chromedevtools.github.io/devtools-protocol/ https://developer.chrome.com/extensions/debu ...

  6. IDEA在运行Mybatis时找不到路径

    idea的默认是不加载java文件下的所以我们要手动添加,加载java文件到pom文件下,在build中添加 <resources> <resource> <direct ...

  7. compatible

    compatible 英 [kəmˈpætəbl] 美 [kəmˈpætəbəl] adj. 兼容的,相容的; 和谐的,协调的; [生物学] 亲和的; 可以并存的,能共处的;

  8. iOS之Safari调试webView/H5页面

    之前做过混合开发,用的是JavaScriptCore+OC+UIWebView. Safari调试功能真的很有用,通过它可以轻松定位问题的所在,下面说说怎么调试. 开启Safari开发菜单 在Mac的 ...

  9. 记录----第一次使用BFS（广度搜索）学习经验总结

    学习经验记录与分享—— 最近在学习中接触到了一种解决最短路径的实用方法----BFS(广度搜索),在这里总结并分享一下第一次学习的经验. 首先第一个要了解的是"queue"(队列函 ...

  10. 199. Binary Tree Right Side View 从右侧看的节点数

    ［抄题］: Given a binary tree, imagine yourself standing on the right side of it, return the values of t ...