如果要自定义右键菜单，那么就需要禁止原本的右键菜单，代码如下

document.oncontextmenu = new Function("return false;");//禁止右键默认菜单

该自定义右键菜单是基于jquery上的

html+css:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{ margin:0; padding:0; }

    #js-right-menu{ background-color:#fff; z-index:9999; }

    #js-right-menu a{ color:#333; display:block; text-decoration:none; font-size:14px; height:25px; line-height:25px; border:1px solid #fff; padding:0 10px; }

    #js-right-menu a:hover{ background-color:#eee; border-color:#ddd; }

    .mydiv1{ background:#f8f8f8; width:200px; height:300px; }

    .mydiv2{ background:#ddd; width:200px; height:100px; }

    </style>

</head>

<body>

    <div id="mydiv" style="border:1px solid #ddd; height:400px; width:400px;">

        <div class="mydiv1"></div>

        <div class="mydiv2"></div>

    </div>

<script src="js/jquery-1.8.2.min.js"></script>

<script src="js/rightMenu.js"></script>

<script>

$(function(){

    $("#mydiv").rightMenu({_width:"200px",fun:["deleteDom","nextDom","prevDom"]});//有三个默认的菜单

    $(".mydiv1").rightMenu({_width:"200px",menu:["删除"],fun:["deleteDom"]});//只有删除菜单

    $(".mydiv2").rightMenu({_width:"200px",menu:[],fun:[]});//没有右键菜单

});

</script>

</body>

</html>

rightMenu.js:

function deleteDom(){

  event.stopPropagation();

  alert("删除");

  rightMenu.removeDom();

}

function nextDom(){

  event.stopPropagation();

  alert("下一个");

  rightMenu.removeDom();

}

function prevDom(){

  event.stopPropagation();

  alert("上一个");

  rightMenu.removeDom();

}

function rightMenu(opt){//右键菜单

  this.cfg = $.extend({

    _width:"400px",

    menu: ["删除","下一个","上一个"],

    fun: ["","function(){}","function(){}"]

  },opt || {});

}

rightMenu.removeDom = function(){//移除菜单

  var menuDom = document.getElementById("js-right-menu");

  menuDom ? document.body.removeChild(menuDom) : "";

}

rightMenu.stopPropagationFun = function(e){//阻止冒泡事件

  if(e && e.stopPropagation){

    e.stopPropagation();

  }else{ //if IE

    window.event.cancelBubble = true;

  }

}

rightMenu.prototype.creatDom = function(e){//创建节点

  var dom = document.createElement("div");

  var str = "";

  var pageX = e.clientX;

  var pageY = e.clientY;

  var screenW = $(window).width();

  var screenH = $(window).height();

  var lft = (pageX+parseInt(this.cfg._width))>screenW ? ((pageX-parseInt(this.cfg._width))<?pageX:(pageX-parseInt(this.cfg._width)))+"px" : pageX+"px";

  var top = 0;

  var domH = 0;

  //设置样式

  dom.setAttribute("id","js-right-menu");

  dom.style.cssText = 'width:'+(parseInt(this.cfg._width)-6)+'px;position:absolute;top:'+pageY+'px;left:'+lft+';height:auto;border:1px solid #ddd;padding:2px;';

  for(var i=0; i<this.cfg.menu.length; i++){

    str += '<p><a href="javascript:;" id="js-alertMenu'+i+'" onmousedown="'+this.cfg.fun[i]+'()">'+this.cfg.menu[i]+'</a></p>';

  }

  dom.innerHTML = str;

  document.body.appendChild(dom);

  domH = $(dom).outerHeight();

  top = (pageY+domH)>screenH ? (pageY-domH)+"px" : pageY+"px";

  dom.style.top = top;

}

rightMenu.prototype.mouseEvent = function(e){//鼠标事件

  rightMenu.stopPropagationFun(e);//阻止冒泡事件

  document.oncontextmenu = new Function("return false;");//禁止右键默认菜单

  var tagDom = $(e.target);

  if(tagDom.hasClass("js-right-menu") || tagDom.parents(".js-right-menu").length){

    return false;

  }

  rightMenu.removeDom();

  if(e.button === 2 && (this.cfg.menu.length === this.cfg.fun.length) && this.cfg.menu.length){

    this.creatDom(e);

  }

}

;(function($){

  $.fn.rightMenu = function(opt){

    var self = $(this);

    document.onmousedown = function(e){

      rightMenu.removeDom();//删除节点

    }

    self.mousedown(function(e){

      rightMenu.stopPropagationFun(e);//阻止冒泡事件

      var menuEvent = new rightMenu(opt);

      menuEvent.mouseEvent(e);

    });

  }

})(jQuery);

如果不需要有右键菜单，只需给$(".mydiv2").rightMenu({_width:"200px",menu:[],fun:[]});中的menu或fun设置为空数组即可

jquery 自定义右键菜单的更多相关文章

  1. jQuery自定义右键菜单

    首先看下效果,效果在最下面: 代码: body { font-size: 12px; margin: 0px; padding: 0px; } form,div,ul,li { margin: 0px ...

  2. js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  3. 自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  4. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  5. JavaScript自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  7. antd Tree组件中，自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  8. AS3.0 自定义右键菜单类

    AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...

  9. js之自定义右键菜单

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Leetcode之广度优先搜索（BFS）专题-127. 单词接龙（Word Ladder）

    Leetcode之广度优先搜索(BFS)专题-127. 单词接龙(Word Ladder) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...

  2. 【DSP开发】回马枪要你命 德州仪器发布最强ARM芯片Keystone II

    之前许多传闻称德州仪器将会彻底放弃OMAP系列ARM处理器,从此离开手持设备的江湖.如果你信以为真,那可就太小看德州仪器这个老狐狸了--要知道德州仪器诞生的比Intel都还早几年.三小时前,德州仪器宣 ...

  3. 【VS开发】关于SEH的简单总结

    尽管以前写过一篇SEH相关的文章<关于SEH的简单总结>, 但那真的只是皮毛,一直对Windows异常处理的原理似懂非懂, 看了下面的文章 ,一切都豁然开朗.  1997年文章,Windo ...

  4. 【Linux开发】linux设备驱动归纳总结（一）：内核的相关基础概念

    linux设备驱动归纳总结(一):内核的相关基础概念 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  5. Java小知识-----Map 按Key排序和按Value排序

    Map排序的方式有很多种,这里记录下自己总结的两种比较常用的方式:按键排序(sort by key), 按值排序(sort by value). 1.按键排序 jdk内置的java.util包下的Tr ...

  6. 【转帖】SQL Server 各版本发布时间和开发代号

    SQL Server 各版本发布时间和开发代号 2019年01月23日 11:07:44 努力挣钱娶媳妇的苗同学 阅读数 278 https://blog.csdn.net/weixin_446098 ...

  7. [转帖]Java 8新特性探究 前言

    Java 8新特性探究 前言 https://my.oschina.net/benhaile/blog/174136 讲下java的历史 感觉挺好的. 评论 17 jdk8java8javase新特性 ...

  8. 小白学习django第六站-http相关

    请求与相应 HttpRequest对象API def home(request): print('path:', request.path) print('mothod:', request.meth ...

  9. MVCC实现机制

    1. MVCC简介 1.1 什么是MVCC MVCC(Multiversion concurrency control )是一种多版本并发控制机制. 1.2 MVCC是为了解决什么问题? 并发访问(读 ...

  10. EJS学习（三）之语法规则中

    ⚠️实例均结合node,也就是AMD规范版本 ejs中使用render()表示渲染文本 接收三个参数:模版字符串.data.options,返回一个字符串 const ejs = require('e ...