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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
Less 安装及基本用法
May 05 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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中date()日期函数有关参数整理
2011/07/19 PHP
PHP安全配置详细说明
2011/09/26 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python模拟事件触发机制详解
2018/01/19 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python求凸包及多边形面积教程
2020/04/12 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
销售人员获奖感言
2014/02/05 职场文书
还款承诺书范文
2014/05/20 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
分家协议书范本
2016/03/22 职场文书