oncontextmenu的作用是阻止浏览器默认的鼠标右键行为。

阻止弹出右键自带菜单

        document.oncontextmenu=function(){
console.log('你点击了右键');
return false;
}
模拟右键菜单
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#main{
width: 140px;
height: auto;
background: #ededed;
text-align: center;
display: none;
position: absolute;
}
</style>
<div id="main">
<ul>
<li>我是第一个选项</li>
<li>我是第二个选项</li>
<li>我是第三个选项</li>
<li>我是第四个选项</li>
</ul>
</div>
<script>
document.oncontextmenu=function(ev){
var oEvent = ev||event;
var Odiv = document.getElementById('main');
Odiv.style.display='block';
Odiv.style.left=oEvent.clientX+'px';
Odiv.style.top=oEvent.clientY+'px';
return false
};
var Odiv = document.getElementById('main');
document.onclick=function(){
Odiv.style.display='none';
} </script>

oncontextmenu事件的更多相关文章

  1. OnContextMenu事件(转)

    用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return ...

  2. 熟悉一下oncontextmenu事件的知识

    定义和使用 只要点击鼠标右键,就触发oncontextmenu事件并打开上下文菜单. 需要注意的是:所有主流浏览器都支持oncontextmenu事件,但其中的contextmenu元素只有FireB ...

  3. oncontextmenu

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键:在JS中设置oncontextmenu='return true'用window.document.on ...

  4. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  5. OnContextMenu实现禁止鼠标右键

    OnContextMenu事件 定义和使用:oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单.注意:所有浏览器都支持 oncontextmenu 事件, contextmen ...

  6. 浏览器根对象window之事件

    1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimatio ...

  7. Js中的4个事件

    除了加载文档的事件onload和鼠标相关的一些事件如onclick,onmouseover等.js还有一些相对不常用的事件,这些事件也有各自的应用场景,本文就介绍 onkeydown,oncontex ...

  8. javascript基础07

    javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...

  9. 《HTML5秘籍》学习总结--2016年7月24日

    前段时间因为工作中看到同事使用了一个type为date的<input>元素,直接就形成了一个日期选择的表单控件,当时觉得很神奇,以为是什么插件,就问了同事是怎么做出来的,同事告诉我这是HT ...

随机推荐

  1. solr添加安全设置

    solr版本为5.2.1 配置在了外网,不希望任何人都能拿到数据,所以添加了安全设置,参考 http://www.jianshu.com/p/1e79edb2b817 按照上面的流程走了一遍 1./u ...

  2. JSON和数据集互相转换单元

    如题......只是一个单元, 为了测试JSON单元性能的... 具体测试结果参考: http://www.cnblogs.com/hs-kill/p/3668052.html 代码中用到的Seven ...

  3. UML之类图

    类(Class)封装了数据和行为,是具有相同属性.操作.关系的对象集合的总称. 类图(Class Dialog)使用系统中不同类来描述系统的静态结构,类图用来描述不同类和它们之间的关系. 类图由三部分 ...

  4. python中常用的模块的总结

    1. 模块和包 a.定义: 模块用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件.(例如:文件名:test.py,对应的模块名:test) ...

  5. flex自适应小例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Leetcode: Encode String with Shortest Length && G面经

    Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...

  7. kali driftnet

    语法 : driftnet   [options]   [filter code] 主要参数: -b               捕获到新的图片时发出嘟嘟声 -i  interface     选择监 ...

  8. zjuoj 3780 Paint the Grid Again

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3780 Paint the Grid Again Time Limit: 2 ...

  9. python 学习笔记

    >>> help(print)Help on built-in function print in module builtins: print(...) print(value, ...

  10. Struts2批量验证(POC)

    only poc , 再据结果利用EXP进一步测试: 支持 -u 单个url; -f 文本批量URL导入 url列表格式是https://www.baidu.com #! /usr/bin/env p ...