码迷,mamicode.com
首页 > 其他好文 > 详细

获取或设置当前窗口contextmenu事件的事件处理函数

时间:2017-12-12 00:04:51      阅读:509      评论:0      收藏:0      [点我收藏+]

标签:number   set   位置   20px   size   xxxx   获取   body   cto   

在浏览器中 鼠标右键点击会显示默认的 自带的菜单,那么如何禁止 和更改呢?

1)  禁止右键

window.oncontextmenu = funcRef;
//funcRef是个函数引用

    列子:

    window.oncontextmenu = function () {
       return false;
    }
    //该窗口禁止使用右键

2)更改  (自定义右键菜单

html结构

<ul id="menu">
  <li>重命名</li>
  <li>删除</li>
  <li>移动到</li>
  <li class="more">更多 >
   <ul>
     <li>xxxx</li>
     <li>xxxx</li>
     <li>xxxx</li>
     <li>xxxx</li>
   </ul>

  </li>

</ul>

css 样式

ul{
  list-style: none;
  padding: 0;
  border:1px solid #000;
  border-bottom: none;
  width:200px;
  position: absolute;
  display: none;
}
li{
  line-height: 20px;
  padding:5px;
  border-bottom:1px solid #000;
  position: relative;
}

javaScript

/*
* 右键点击事件: oncontextmenu
*/

 

// 获取元素

var menu = document.querySelector(‘#menu‘);

var more = menu.querySelectorAll(‘.more‘);

//显示二级菜单

//如果菜单下有更多内容 就显示出来
for(var i=0,l=more.length;i<l;i++){
  more[i].onmouseover = function() {
    var ul = this.querySelector(‘ul‘);
    ul.style.display = ‘block‘;
    ul.style.left = this.offsetWidth+‘px‘;
    ul.style.top = 0;
};

more[i].onmouseout = function() {
   var ul = this.querySelector(‘ul‘);
   ul.style.display = ‘none‘;
  };
}

// 定义右键菜单

document.oncontextmenu = function(ev){

  var ev = ev||event; //处理兼容
  ev.preventDefault();//阻止默认行为

  // 获取鼠标位置

  var x = ev.clientX;
  var y = ev.clientY;

  menu.style.display = ‘block‘;
  menu.style.left = x+‘px‘;
  menu.style.top = y+‘px‘;

};

// 点击 菜单消失

document.onclick = function(){
  menu.style.display = ‘none‘;
};

 

获取或设置当前窗口contextmenu事件的事件处理函数

标签:number   set   位置   20px   size   xxxx   获取   body   cto   

原文地址:http://www.cnblogs.com/zhaizhixuan/p/8025468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!