首页 > web前端 > js教程 > JavaScript 对任意元素,自定义右键菜单的实现方法_基础知识

JavaScript 对任意元素,自定义右键菜单的实现方法_基础知识

WBOY
发布: 2016-05-16 17:34:04
原创
1229 人浏览过

一、一些概念:

  1、鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键。
  BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是“单击右键”事件,都返回2。

  2、事件onmousedown:表示鼠标按键按下的动作。
    事件oncontextmenu:点击鼠标触发的另一个事件。

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

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

          声明:

 

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

          声明:

 

      解决兼容性:

 

二、实现:

HTML:

复制代码 代码如下:

   

Uncle Cat is a fat white cat !


   

        剪切
        复制
        粘贴
   


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);
  }
}
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板