个人中心
gpt4 book ai didi

javascript实现在某个元素上阻止鼠标右键事件的方法和实例

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章javascript实现在某个元素上阻止鼠标右键事件的方法和实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

最近在做一个小东西的时候需要在某一个元素上“右击”触发一个自定义菜单，通过自定义的菜单对右击的条目进行编辑。这就要求屏蔽默认的右键菜单 。

IE和FF下面的元素都有oncontextmenu这个方法，在FF下面只要通过event.preventDefault()方法就可以轻松实现这个效果。IE并不支持这个方法，在IE下面一般是通过触发方法后return false来实现阻止默认事件的.

通常我们使用阻止右键事件是在全局阻止，即在document层面就将右键拦截，现在我想要实现的效果是只在特定的区域阻止默认的右键事件，而其他区域并不影响.

通过实验我发现要是在IE下绑定的方法中return false后在document层面上可以实现阻止右键的默认行为。但是具体到某一个元素比如div，则失效.

最后通过查找手册发现，IE下的event对象有一个returnValue属性，如果将这个属性设置为false则不会触发默认的右键事件。类似如下:

复制代码 代码如下:

event.returnValue = false;

  。

只要加入这句就实现了我想要的效果。完整Demo代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >在某个元素上阻止鼠标右键默认事件DEMO</ title >
< style >
body{font-size:12px; line-height:24px; font-family:Arial, Helvetica, sans-serif;}
#activeArea{width:300px;height:200px; background:#06C; color:#fff;}
#cstCM{ width:120px; background:#eee; border:1px solid #ccc; position:absolute; }
#cstCM ul{margin:0; padding:0;}
#cstCM ul li{ list-style:none;padding:0 10px; cursor:default;}
#cstCM ul li:hover{ background:#009; color:#fff;}
.splitTop{ border-bottom:1px solid #ccc;}
.splitBottom{border-top:1px solid #fff;}
</ style >
< script >
function customContextMenu(event){
     event.preventDefault ? event.preventDefault():(event.returnValue = false);
     var cstCM = document.getElementById('cstCM');
     cstCM.style.left = event.clientX + 'px';
     cstCM.style.top = event.clientY + 'px';
     cstCM.style.display = 'block';
     document.onmousedown = clearCustomCM;
}
function clearCustomCM(){
     document.getElementById('cstCM').style.display = 'none';
     document.onmousedown = null;
}
</ script >
</ head >
 
< body >
< div id = "cstCM" style = "display:none;" >
     < ul >
         < li >View</ li >
         < li >Sort By</ li >
         < li class = "splitTop" >Refresh</ li >
         < li class = "splitBottom" >Paste</ li >
         < li class = "splitTop" >Paste Shortcut</ li >
         < li class = "splitBottom" >Property</ li >
     </ ul >
</ div >
< div id = "activeArea" oncontextmenu = "customContextMenu(event)" >
     Custom Context Menu Area
</ div >
</ body >
</ html >

这个效果兼容IE6+，FF，但是opera压根就没有oncontextmenu这个方法所以也就不能简单的通过这个方法实现，要想实现还需要通过其他的手段.

最后此篇关于javascript实现在某个元素上阻止鼠标右键事件的方法和实例的文章就讲到这里了,如果你想了解更多关于javascript实现在某个元素上阻止鼠标右键事件的方法和实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 深入理解Javascript中this的作用域
文章推荐： VMware安装Centos8系统的教程图解（命令行模式）
文章推荐： python嵌套函数使用外部函数变量的方法(Python2和Python3)
文章推荐： 详解Ubuntu16.04安装Docker、nvidia-docker的教程
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com