JavaScript对任意元素,自定义右键菜单的实现方法
JavaScript方法 实现 自定义 元素 菜单 任意 右键
2023-06-13 09:14:53 时间
1、鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键。
BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是“单击右键”事件,都返回2。
2、事件onmousedown:表示鼠标按键按下的动作。
事件oncontextmenu:点击鼠标触发的另一个事件。
3、中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用preventDefault()方法。
4、事件对象:①在IE中,事件对象是window对象的一个event属性。
HTML:
<pid="p1">UncleCatisafatwhitecat!</p>
<divid="d1">
<a>剪切</a>
<a>复制</a>
<a>粘贴</a>
</div>
javascript:
window.onload=function(){
rightmenu("p1","d1");
}
/****
* 封装右键菜单函数:
* elementID 要自定义右键菜单的元素的id
* menuID 要显示的右键菜单DIv的id
*/
functionrightmenu(elementID,menuID){
varmenu=document.getElementById(menuID); //获取菜单对象
varelement=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获取时间戳的方法。
- 使用 JavaScript 调用 Linux 命令的实现方法(js调用linux命令)
- JavaScript的Function详细
- javascript+css网页每次加载不同样式的实现方法
- javascript自动填写表单的实现方法
- javascript对象之内置对象Math使用方法
- 为JavaScript类型增加方法的实现代码(增加功能)
- javascript中onmouse事件在div中失效问题的解决方法
- 深入理解javascript学习笔记(一)编写高质量代码
- JavaScript用JQuery呼叫Server端方法实现代码与参考语法
- JavaScript实现类的多种方法实例
- javascript中encodeURI和decodeURI方法使用介绍
- JavaScript移除数组元素减少长度的方法
- JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
- javascript验证身份证完全方法具体实现
- Javascript实现复制(Copy)动作方法大全
- javascript实现iframe框架延时加载的方法
- 让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
- Javascript与jQuery方法的隐藏与显示
- JavaScript实现更改网页背景与字体颜色的方法
- JavaScript使用setInterval()函数实现简单轮询操作的方法
- JavaScript组件焦点与页内锚点间传值的方法
- javascript实现浏览器窗口传递参数的方法