JavaScript 对任意元素,自定义右键菜单的实现方法


Posted in Javascript onMay 08, 2013

一、一些概念:

1、鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键。

BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是“单击右键”事件,都返回2。

2、事件onmousedown:表示鼠标按键按下的动作。

  事件oncontextmenu:点击鼠标触发的另一个事件。

3、中断默认事件处理函数的方法:IE中设置returnValue=false;  标准DOM中调用preventDefault()方法。

4、事件对象:①在IE中,事件对象是window对象的一个event属性。

声明:JavaScript 对任意元素,自定义右键菜单的实现方法

 

②在标准DOM中,事件对象是事件处理函数的唯一参数。

声明:JavaScript 对任意元素,自定义右键菜单的实现方法

 

解决兼容性:JavaScript 对任意元素,自定义右键菜单的实现方法

 

二、实现:

HTML:

    <p id="p1">Uncle Cat is a fat white cat !</p>
    <div id="d1">
        <a>剪切</a>
        <a>复制</a>
        <a>粘贴</a>
    </div>

javascript:
window.onload=function(){
    rightmenu('p1','d1');
}
/****
*
 封装右键菜单函数:
*

elementID   要自定义右键菜单的 元素的id
*

menuID
  要显示的右键菜单DIv的 id
*/
function rightmenu(elementID,menuID){

var menu=document.getElementById(menuID);      //获取菜单对象

var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素

element.onmousedown=function(aevent){         //设置该元素的 按下鼠标右键右键的 处理函数


if(window.event)aevent=window.event;      //解决兼容性


if(aevent.button==2){                   //当事件属性button的值为2时,表用户按下了右键



document.oncontextmenu=function(aevent){
   

if(window.event){
       

aevent=window.event;




aevent.returnValue=false;         //对IE 中断 默认点击右键事件处理函数



}else{




aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数



};


};


menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'


//将菜单相对 鼠标定位


}

}

menu.onmouseout=function(){                  //设置 鼠标移出菜单时 隐藏菜单


setTimeout(function(){menu.style.display="none";},400);

}
}
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 #Javascript
使用JavaScript 实现各种跨域的方法
May 08 #Javascript
jQuery根据纬度经度查看地图处理程序
May 08 #Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 #Javascript
JavaScript 创建运动框架的实现代码
May 08 #Javascript
jQuery输入城市查看地图使用介绍
May 08 #Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 #Javascript
You might like
PHP获取url的函数代码
2011/08/02 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
node后端服务保活的实现
2019/11/10 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
tensorflow学习教程之文本分类详析
2018/08/07 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
检讨书模板
2015/01/29 职场文书
爱心捐助活动总结
2015/05/09 职场文书
如何在Python中创建二叉树
2021/03/30 Python
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
MySQL中order by的使用详情
2021/11/17 MySQL