jquery 自定义右键菜单
如果要自定义右键菜单，那么就需要禁止原本的右键菜单，代码如下
document.oncontextmenu = new Function("return false;");//禁止右键默认菜单
该自定义右键菜单是基于jquery上的
html+css:
<!DOCTYPE html>
<html >
<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 >
<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))<0?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:;" +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设置为空数组即可
- 上一篇 »windows下python管理右键菜单
- 下一篇 »javascript 处理鼠标右键事件