概述

以前在网上找过屏蔽右键菜单的代码，也找过屏蔽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. # 20175213 2018-2019-2 《Java程序设计》第2周学习总结

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

  2. 使用rpm-build制作nginx的rpm包

    2014-11-27 11:05:49   一.RPM包的分类 RPM有五种基本的操作功能:安装.卸载.升级.查询和验证. linux软件包分为两大类: (1)二进制类包,包括rpm安装包(一般分为i ...

  3. layui-tree创建下拉树型选项框

    1.简介 也许你对树菜单再熟悉不过了,然而你仍有可能更青睐layui的tree,它也许比以往你知道的任何一个类似的组件都更轻量.简单,你在享受许多功能的同时,甚至不用去记太多的参数. 另外,最大的重点 ...

  4. springboot整合dubbox与zookeeper

    springboot中dubbo依赖的引入和配置(application.properties)参见:https://blog.csdn.net/wohaqiyi/article/details/72 ...

  5. sh 了解

    shell 脚本中 `dirname $0` 在命令行状态下单纯的执行时没有意义的,因为他返回当前路径的“.”. 在脚本中他返回这个脚本文件放置的目录,并可以根据这个目录来定位所要运行的程序的相对位置 ...

  6. http://ctf.bugku.com/challenges#love:bugku--love

      做了一道逆向题目,主要关联到base64编码的知识点.下面做一分析. 题目如下:   通过测试,可知它没有加壳.尝试使用IDA进行分析. 1.IDA分析文件   打开文件后,按[shift+F12 ...

  7. TZOJ 3820 Revenge of Fibonacci(大数+trie)

    描述 The well-known Fibonacci sequence is defined as following: Here we regard n as the index of the F ...

  8. docker 支持ipv6 (核心要点是ndp需要把docker内的ip全部加入到ndplist中来)

    IPv6 with Docker Estimated reading time: 10 minutes The information in this section explains IPv6 wi ...

  9. dpkg: error: dpkg status database is locked by another process

    First run: lsof /var/lib/dpkg/lock Then make sure that process isn't running: ps cax | grep PID If i ...

  10. Django获取数据库数据时根据id筛选

    filter(id__in=models.Teacher.objects.all()[0:5]) teacher_list = models.Teacher.objects.filter(id__in ...