Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY
Freigeben: 2016-05-16 17:34:04
Original
1202 Leute haben es durchsucht

一、一些概念:

  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);
  }
}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage