主要用到了oncontextmenu事件，在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单，再使用event获取鼠标的坐标位置，设置自定义菜单的位置。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.1.1.js" charset="utf-8"></script>
    <script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script>
    <script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
    <link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <button class="context-menu-one">按钮1</button>
    <script type="text/javascript">
      $(function() {
         //初始化菜单
         $.contextMenu({
             selector: '.context-menu-one',
             callback: function(key, options) {
                 console.log("点击了：" + key);
             },
             items: {
                 "edit": {name: "编辑", icon: "edit"},
                 "cut": {name: "剪切", icon: "cut"},
                 "copy": {name: "复制", icon: "copy"},
                 "paste": {name: "粘贴", icon: "paste"},
                 "delete": {name: "删除", icon: "delete"},
                 "sep1": "---------",
                 "quit": {name: "退出", icon: function(){
                     return 'context-menu-icon context-menu-icon-quit';
                 }}
             }
         });
      });
    </script>
  </body>
</html>
icon: "paste" // Class context-menu-icon-paste is used on the menu item.
使用自带的图标需要font文件夹的内容

js jQuery 右键菜单 清屏的更多相关文章

  1. js(jquery)右键菜单插件的实现

    今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: ...

  2. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  3. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  4. jQuery右键菜单contextMenu使用实例

    在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...

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

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

  6. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

  7. js禁用右键菜单、选中、复制、剪切、粘贴

    //屏蔽右键菜单 document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try ...

  8. JS屏蔽右键菜单，复制，粘帖xxxxx........

    //屏蔽右键菜单 document.oncontextmenu = function (event) { if (window.event) { event = window.event; } try ...

  9. js 禁用右键菜单、拖拽、选中、复制

    //禁用拖拽 document.ondragstart = function () { return false; }; /** * 禁用右键菜单 */ document.oncontextmenu ...

随机推荐

  1. 如何不使用Navigator空间实现跳转页面？

    //引入 Loading页面 主页面 登录页等页面组件 constructor(props) { super(props); this.state = { 登录状态: 等待检查 }; } compon ...

  2. Tomcat7启动报Error listenerStart错误

    问题 Tomcat7在启动时报错,详细信息如下: 十一月 23, 2013 7:21:58 下午 org.apache.catalina.core.StandardContext startInter ...

  3. tmux用于恢复远程屏幕

    1.我主要用tmux在远程登陆后,恢复以前会话时候用. 2.tmux创建新会话: tmux new -s 会话名 3.返回控制台: Ctrl+b d ,Ctrl+b命令是tmux前置命令,每次都要先输 ...

  4. iOS－登录认证／json解析

    用户输入用户名和密码,点击登录...我们把用户名和密码(用post方式或者get方式,get方式多用于测试看你需要)传给服务器,服务器进行判断,然后返回一个接口给我们(这里服务器返回的json接口,正 ...

  5. Status bar and navigation bar appear over my view's bounds in iOS 7

    转自:http://stackoverflow.com/questions/17074365/status-bar-and-navigation-bar-appear-over-my-views-bo ...

  6. Android Shell命令dumpsys

    dumpsys命令可以显示手机中所有应用程序的信息,并且也会给出现在手机的状态. 直接执行adb shell dumpsys KEY 会显示以下所有信息. KEY的可选名称 SurfaceFlinge ...

  7. linux系统查毒软件ClamAV

    安装方法: 长久使用参考: http://www.cnblogs.com/kerrycode/archive/2015/08/24/4754820.html#undefined 临时使用参考: htt ...

  8. PLSA及EM算法

    前言:本文主要介绍PLSA及EM算法,首先给出LSA(隐性语义分析)的早期方法SVD,然后引入基于概率的PLSA模型,其参数学习采用EM算法.接着我们分析如何运用EM算法估计一个简单的mixture ...

  9. linux命令（43）：awk的使用技巧

    AWK是一种处理文本文件的语言,是一个强大的文本分析工具. 之所以叫AWK是因为其取了三位创始人 Alfred Aho,Peter Weinberger, 和 Brian Kernighan 的Fam ...

  10. 【Java】IO Stream详细解读

    成鹏致远 | 2013年12月31日 什么是IO Java中I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基于数据流进行输入输出,这些数据流表示了字符或者字节数据的流 ...