jquery 简短右键菜单 多浏览器兼容


Posted in Javascript onJanuary 01, 2010
$(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+"\" class=\"div_RightMenu\"><div><ul class='ico'>"; 
for(var i=0;i<menuCount;i++){ 
divMenuList+="<li class=\"RMli_"+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 getElementsByClassName实现代码
Oct 11 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
layui实现三级导航菜单
Jul 26 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 #Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 #Javascript
url 特殊字符 传递参数解决方法
Jan 01 #Javascript
JavaScript 数组循环引起的思考
Jan 01 #Javascript
javascript eval和JSON之间的联系
Dec 31 #Javascript
js下用gb2312编码解码实现方法
Dec 31 #Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 #Javascript
You might like
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP实现懒加载的方法
2015/03/07 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python和js交互调用的方法
2020/06/23 Python
python操作链表的示例代码
2020/09/27 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
介绍一下Java中的static关键字
2012/05/12 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
新品发布会主持词
2014/04/02 职场文书
检讨书之工作不认真
2019/08/14 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
pandas中DataFrame检测重复值的实现
2021/05/26 Python
教你怎么用python selenium实现自动化测试
2021/05/27 Python
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript