主要用到了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. 案例:用Redis来存储关注关系

    Redis提供了丰富的数据类型,比起关系型数据库或者简单的Key-Value存储(比如Memcached)来,Redis的数据模型与实际应用的数据模型更相近.比如下面说到的好友关系的存储,原作者使用了 ...

  2. mysql分享一:运维角度浅谈MySQL数据库优化

    转于:http://lizhenliang.blog.51cto.com/7876557/1657465 1.数据库表设计要合理避免慢查询.低效的查询语句.没有适当建立索引.数据库堵塞(死锁)等 2. ...

  3. java将数据从List转换Map

    一.多对多 -> 一对多 二.代码实现 /** * 1个国家下所有城市,一对多关系 * 组装成Map结构返回 **/ public Map<String,List<JSONObjec ...

  4. 配置并使用Android支持的库

    原文链接:http://android.eoe.cn/topic/android_sdk Android Support Library(支持库)提供了包含一个API库的JAR文件,当你的应用运行在A ...

  5. 在谷歌浏览器中安装防广告的插件(abp)

    1.打开谷歌浏览器 2.打开 设置-->见到"扩展程序"--->在搜索框中搜索"adb"-->点击"Adblock plus&quo ...

  6. 基于express框架的Token实现方案

    什么是Token? 在计算机身份认证中是令牌(临时)的意思,在词法分析中是标记的意思.一般我们所说的的token大多是指用于身份验证的token Token的特点 随机性 不可预测性 时效性 无状态. ...

  7. raft Paxos

    CONSENSUS: BRIDGING THEORY AND PRACTICE https://ramcloud.stanford.edu/~ongaro/thesis.pdf https://web ...

  8. TimescaleDB比拼InfluxDB:如何选择合适的时序数据库?

    https://www.itcodemonkey.com/article/9339.html 时序数据已用于越来越多的应用中,包括物联网.DevOps.金融.零售.物流.石油天然气.制造业.汽车.太空 ...

  9. 每日英语:Singles Day in China

    Singles Day in China is the celebration -- or mourning -- of being unattached. Started by students i ...

  10. 每日英语:How Your Knees Can Predict the Weather

    The Wolff family of Paramus, N.J., was eyeing the gathering clouds and debating whether to cancel a ...