概述

以前在网上找过屏蔽右键菜单的代码，也找过屏蔽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. Gitlab安装与备份恢复

    GitHub是2008年由Ruby on Rails编写而成,与业界闻名的Github类似;但要将代码上传到GitHub上面,而且将项目设为私有还要收费.GitLab是一个用于仓库管理系统的开源项目, ...

  2. mybatis泛型(一)

    mybatis的确很方便,可以随意配置sql语句,并根据参数生成指定的sql,也可以根据查询结果生成指定对象 但是有一点非常恐怖,就是每个数据库表都必须有一个配置,等于在一个系统里做了很多重复的工作, ...

  3. Redux使用教程

    在开始之前,需要安装环境,node.js可以使用npm管理包,开发的工具webstorm可以创建相应的项目. 项目中redux是管理全局的同一个store,React-router是管理路由的,这里只 ...

  4. 【原创】python嗅探QQ消息实战

    目录 需求分析 选型 设计与流程 实现过程 结果展示 1 需求分析   在一些业务场景中需要拿到IM上的通信记录来做一些数据分析,例如对QQ平台中的消息进行领域分类等. 2 选型 环境与工具: pyt ...

  5. opencv setTo（）

    转载至 作者:跬步达千里 opencv的setTo函数是将图像设置为某个值; 例如: 1.有一个Mat src,想将他的值全部设置成0,则可以src.setTo(0) 2.setTo还有更为高级的用法 ...

  6. 大数据入门到精通7--对复合value做reducebykey

    培训系列7--对复合value做reduce 1.做基础数据准备 val collegesRdd= sc.textFile("/user/hdfs/CollegeNavigator.csv& ...

  7. 【Django】 TemplateDoesNotExist at /HTMLeditor/HTMLeditorHandler/

    TemplateDoesNotExist at /HTMLeditor/HTMLeditorHandler/search/indexes/htmleditor/htmleditor_text.txt ...

  8. TPL DataFlow初探（二）

    上一篇简单的介绍了TDF提供的一些Block,通过对这些Block配置和组合,可以满足很多的数据处理的场景.这一篇将继续介绍与这些Block配置的相关类,和挖掘一些高级功能. 在一些Block的构造函 ...

  9. canvas（三） star- demo

    /** * Created by xianrongbin on 2017/3/8. * 本例子使用渐变画出 璀璨星空 */ var dom = document.getElementById('clo ...

  10. 48- java Arrays.sort和collections.sort()再次总结

    今天又碰到一个新BUG,记下来. 一直报空指针异常,我就很奇怪了,怎么就空指针了呢,我输出时,也能输出东西呀. 原来Arrays.sort() 和 Collections.sort() 都是对整个数组 ...