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

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

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‘;
};

时间: 2024-11-09 00:33:48

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

jquery事件之事件处理函数

一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数.没用on关键字 jQueryObject.bind( events [, data ], handler ) One 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数.只绑定一次 jQueryObject.one( events [, data ], handler 

JavaScript的事件_事件处理函数概述与鼠标事件的处理函数

一.事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件. 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是:onclick. 对于每一个事件,它都有自己的触发范围和方式,如果超出了触发范围和方式,事件处理将失效. 二.鼠标事件:页面所有元素都可触发 1.click:当用户单击鼠标按钮或按下回车键时触发. <script type="text/javascript"> windo

【repost】JavaScript 事件模型 事件处理机制

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. 今天的事件 在漫长的演变史,我们已经告

使用XCB编写X Window程序(05):使用异步的方式和X Server通讯及获取和设置窗口的属性

在前面的例子中,我们从来没有关心过调用XCB函数时,该函数和X Server的通讯是同步的还是异步的.因为在前面的例子中,我们基本上不关心XCB函数的返回值,只有在上一篇中,由于某些操作需要关心它们是否成功(比如是否成功打开字体.是否成功创建GC等),才涉及到XCB函数的返回值. 在这一篇中会更进一步,因为是获取窗口的属性,所以肯定要关注从X Server获取的数据,这时,将会涉及到XCB函数同X Server的通讯是同步的还是异步的.什么是同步?就是说调用一个函数向X Server发出一个请求

HTML5-常见的事件- contextmenu 事件

主要控制应该何时显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单 <1> 由于该事件是冒泡的,因此可以为document 指定一个事件处理程序,用以处理页面中发生的所有此类事件. EventUtil.addHandler(document,"contextmenu",function(event){ console.log("收到"); //收到 }) EventUtil.addHandler(document.body,"c

qt实现类似QQ伸缩窗口--鼠标事件应用

上一章节讲了qt鼠标事件实现,获取鼠标参数的方法.这一讲主要讲怎么应用上讲的鼠标事件实现一个小功能. qq好友对话框右侧 未展开时如图: 鼠标移动到 “隐藏侧边”处单击可以隐藏侧边,隐藏后效果如图: 实现的范例效果如下 1.一般情况 2.鼠标移动到中间分割线中间区域时,效果 3.单击红色按钮后,效果 4.鼠标移动到边界,效果 下面讲解实现过程:一般情况在QT中,这种伸缩窗体的实现有两种方法:一种是是直接用QSplitter分割器实现:另一种直接用布局管理器自己实现.本节用的是第二种方法实现的.布

Delphi获取与设置系统时间格式,即GetLocaleInfo和SetLocaleInfo

在Delphi中,特别是在写管理系统软件时,经常要用到 FormatDateTime 以将 TDateTime 格式的日期时间转换成字符串形式的值显示或保存起来,或者用 StrToDateTime将字符串形式的日期时间转换成 TDateTime 然后再做其他操作. 在进行时间或日期的转换时,会使用系统当前设定的时间日期格式.而如果时间日期格式与字符串中的表示方式不相符,会使转换过程失败.例如当前短日期格式设定为'yyyy/MM/dd',而要转为 '2006-10-20'这样的字符串为日期,就会报

( 转)浅谈QT中窗口刷新事件

浅谈QT中窗口刷新事件 [日期:2011-06-25] 来源:Linux社区  作者:袁硕 [字体:大 中 小] 经过一个星期的项目初步开发,写此文就开发时遇到的一些常见问题,给出些资料和自己的观点,希望能给其他的初学者或者参赛的选手一点帮助,当然,也算是一种抛砖引玉,大家有什么好的技巧经验什么的,也能多多分享,借助这次比赛,我们共同进步~ 如果大家都是跟我一样,刚刚开始接触QT,开始开发QT的程序,肯定也会有很多不习惯的地方,今天我重点想谈的就是这么一个不习惯的地方——QT中窗口刷新事件. 对

JS基础知识——获取未设置行内元素的样式,定时器

一.getComputedStyle(document.getElementById("div1").width)在IE6,7,8下不兼容: document.getElementById("div1").currentStyle.width 在标准浏览器下不兼容 解决办法:属性判断 用上面两个方法,应注意以下问题: 获取到的是计算机(浏览器)计算后的样式 background: url() red …… 复合样式(不要获取) backgroundColor 单一样