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 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php与php MySQL 之间的关系
2009/07/17 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
微信小程序解除10个请求并发限制
2018/12/18 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
windows环境下tensorflow安装过程详解
2018/03/30 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
Weblogic的布署方式
2013/08/23 面试题
iostream与iostream.h的区别
2015/01/16 面试题
品管员岗位职责
2013/11/10 职场文书
简历的自我评价
2014/02/03 职场文书
护林防火标语
2014/06/27 职场文书
班主任培训研修日志
2015/11/13 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server