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页面顶部卷动广告效果
Dec 01 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
Vue.js添加组件操作示例
Jun 13 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中http_build_query 的一个问题
2012/03/25 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php使用正则验证中文
2016/04/06 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
儿童编程python入门
2018/05/08 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
一组SQL面试题
2016/02/15 面试题
保安部任务及岗位职责
2014/02/25 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis