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. 解决OX10.11.4 不能授权的问题

    Did apple server have some maintenance? Open your Terminal and put this command sudo mkdir -p /Users ...

  2. 关于Android中查看app安装时间等信息的问题

    PackageManager packageManager=this.getPackageManager(); try { PackageInfo packageInfo=packageManager ...

  3. Libgdx 循环绘制图片时间隔的问题

    在libgdx中使用循环绘制一张图片铺满某个区域时,有可能会遇到像素计算没有问题时,图块中间还是有约1像素的间隔,或者是本来没有间隔,做了缩放处理之后发现中间有间隔. 解法 当使用Texture加载图 ...

  4. ruby -检查数据类型

    HashObj={","language"=>"zh","make"=>"Apple"," ...

  5. wamp下多域名配置问题

    1.找到wamp安装目录的apache安装目录 找到 httpd.conf文件 例如我安装的目录为 E:\wamp\bin\apache\apache2.2.8\conf\httpd.conf 也可以 ...

  6. goprotocbuf的安装和使用

    首先得到 protobuf 相应的包文件 ,在终端上输入如下 wget http://protobuf.googlecode.com/files/protobuf-2.5.0.tar.gz 下载完毕后 ...

  7. BundleConfig.cs

    namespace Knockout.App_Start { public class BundleConfig { public static void RegisterBundles(Bundle ...

  8. java获取到机器IP地址及MAC码

    import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.net.InetAddress; import java.ne ...

  9. PDO和消息队列的一点个人理解

    什么是消息队列,百度百科说,···消息队列····是在消息的传输过程中保存消息的容器. 看着网上林林总总的文章,都说是为了应对高并发,处理数据量超级大的一种数据容器,也可以说是利用各种方式,先把数据存 ...

  10. 《奥威Power-BI案例应用:带着漫画看报告》腾讯课程开课啦

    元旦小假期过去了,不管是每天只给自己两次下床机会的你,还是唱K看电影逛街样样都嗨的你,是时候重振旗鼓,重新上路了!毕竟为了不给国家的平均工资水平拖后腿,还是要努力工作的.话说2016年已经过去了,什么 ...