jquery 简短右键菜单 多浏览器兼容
jquery 简短右键菜单 多浏览器兼容
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:$(function(){document.oncontextmenu=function(){returnfalse;}/...

复制代码 代码如下:

$(function(){

document.oncontextmenu=function(){return false;}//屏蔽右键

document.onmousemove=mouseMove;//记录鼠标位置

});

var mx=0,my=0;

function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mousePos.x;my=mousePos.y;}

function mouseCoords(ev){

if(ev.pageX||ev.pageY){return{x:ev.pageX,y:ev.pageY};}

return{x:ev.clientX,y:ev.clientY+$(document).scrollTop()};

}

$.fn.extend({RightMenu: function(id,options){options = $.extend({menuList:[]},options);var menuCount=options.menuList.length;

if (!$("#"+id)[0]){

var divMenuList="<div id=""+id+""><div><ul>";

for(var i=0;i<menuCount;i++){

divMenuList+="<li+options.menuList[i].menuclass+"" onclick=""+options.menuList[i].clickEvent+"">"+options.menuList[i].menuName+"</li>";

}

divMenuList += "</ul></div><div>";

$("body").append(divMenuList).find("#"+id).hide().find("li")

.bind("mouseover",function(){$(this).addClass("RM_mouseover");})

.bind("mouseout",function(){$(this).removeClass("RM_mouseover");});

$(document).click(function(){$("#"+id).hide();});

}

return this.each(function(){

this.oncontextmenu=function(){

/*这段 判断鼠标移到页面的最右侧或者最下侧 防止出现滚动条 {*/

var mw=$('body').width(),mhh=$('html').height(),mbh=$('body').height(),

w=$('#'+id).width(),h=$('#'+id).height(),

mh=(mhh>mbh)?mhh:mbh;//最大高度 比较html与body的高度

if(mh<h+my){my=mh-h;}//超 高

if(mw<w+mx){mx=mw-w;}//超 宽

/*} 当然也可以直接跳过*/

$("#"+id).hide().css({top:my,left:mx}).show();

}

});

}

});

在线演示 右键点击测试效果

打包下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类