·您当前的位置:首页 > 技术教程 > JavaScript >

[js]js对某个div添加指定右键信息的方法代码

时间:2017-10-24 16:42酷播
[js]js对某个div添加指定右键信息的方法代码

一、一些概念:

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

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

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

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

          声明:

 

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

          声明:

 

      解决兼容性:

 

二、实现:

  1. <p id="p1">Uncle Cat is a fat white cat !</p> 
  2. <div id="d1"> 
  3.     <a>剪切</a> 
  4.     <a>复制</a> 
  5.     <a>粘贴</a> 
  6. </div> 
  1. window.onload=function(){ 
  2.     rightmenu('p1','d1'); 
  3. /**** 
  4. *     封装右键菜单函数: 
  5. *    elementID   要自定义右键菜单的 元素的id 
  6. *    menuID    要显示的右键菜单DIv的 id 
  7. */ 
  8. function rightmenu(elementID,menuID){ 
  9.   var menu=document.getElementById(menuID);      //获取菜单对象 
  10.   var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素 
  11.   element.onmousedown=function(aevent){         //设置该元素的 按下鼠标右键右键的 处理函数 
  12.     if(window.event)aevent=window.event;      //解决兼容性 
  13.     if(aevent.button==2){                   //当事件属性button的值为2时,表用户按下了右键 
  14.       document.oncontextmenu=function(aevent){ 
  15.        if(window.event){ 
  16.            aevent=window.event; 
  17.         aevent.returnValue=false;         //对IE 中断 默认点击右键事件处理函数 
  18.       }else{ 
  19.         aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数 
  20.       }; 
  21.     }; 
  22.     menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;' 
  23.     //将菜单相对 鼠标定位 
  24.     } 
  25.   } 
  26.   menu.onmouseout=function(){                  //设置 鼠标移出菜单时 隐藏菜单 
  27.     setTimeout(function(){menu.style.display="none";},400); 
  28.   } 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器