js oncontextmenu事件使用详解


Posted in Javascript onMarch 25, 2017

定义和使用

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意:所有浏览器都支持 oncontextmenu 事件, contextmenu 元素只有 Firefox 浏览器支持。

实例

当用户在 <div> 元素 上右击鼠标时执行 JavaScript :

<div oncontextmenu="myFunction()" contextmenu="mymenu">

用oncontextmenu事件单禁用右键菜单

onconTextmenu=window.event.returnValue=false;右键菜单禁用,用这个可以禁止复制。

在<body>中加入属性代码:

<script>
 window.document.oncontextmenu = function(){ 
//alert('请不要点击鼠标右键!');
return false;
} 
</script>

oncontextmenu="return false"

onselectstart="return false" 禁止选中网页上的内容

oncopy="return false" 防复制用户在网页上选中的内容

防止用户另存网页:

利用<noscript><iframe src=*.html></iframe></noscript>标签,能防止网页的直接另存,但不能防止网页被人使用工具下载

*为通配符。

例1:

<html>
<head>
<title>OnContextMenu事件</title>
<script language="JavaScript">
<!--
function uFunction()
{   
document.all.infoDiv.innerHTML='你按下了鼠标右键,但是右键菜单不能 显示!';
}
function uFunction2()
{  

document.all.infoDiv.innerHTML='你按下了Ctrl+鼠标右键,可以 显示右键菜单。';
}
//-->
</script>
</head>
<body oncontextmenu="if(!event.ctrlKey){uFunction();return false}else{uFunction2()}">

<div id="infoDiv">你按下了鼠标右键,但是右键菜单不能 显示!<br>你按下了Ctrl+鼠标右键,可以显示右键菜单。

</div>
</body>
</html>

例2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>利用OnMousedown和OnContextmenu为表格添加鼠标左中右键单击的处理</title>
  <script type="text/javascript">

var keyArray = new Array(
  

new Array(0, "右键"),
  

new Array(1, "左键"),
  

new Array(2, "右键"), // 测试在IE7中按右键是2,在Maxthon2.0正式版中是0
  

new Array(3, "左键右键同时按"),//在IE7中我测试捕获不到,慎用
  

new Array(4, "中键")
  

//测试同时按两个键更多的表示
  

//new Array(6, "中键右键同时按")


);


function Click()


{
  

var message = GetKeyMessage(event.button);
  

alert(message);
  

if (event.button == 2 || event.button == 0) //按右键,// 测试在IE7中按右键是2,在Maxthon2.0正式版中是0
  

 {
    

//处理代码
  

}


}


function GetKeyMessage(button)


{
  

for (var i = 0; i < keyArray.length; i++)
  

{
    

if (keyArray[i][0] == button)
    

{
      

return keyArray[i][1] + ", event.button = " + button;
    

}
  

}
  

 return "未知组合键, event.button = " + button;


}

</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>

<!--oncontextmenu="return false"屏蔽快捷菜单-->
  <td oncontextmenu="return false" onmousedown="Click()">请分别用左键、右键、中键、左键右键组合点这里测试</td>
</tr>
<tr>
  <td>这个表格没有处理,点这里没反应</td>
</tr>
</table>
</body>
</html>
Javascript 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
使用jquery如何获取时间
Oct 13 Javascript
老生常谈js数据类型
Aug 03 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
js 函数式编程学习笔记
Mar 25 #Javascript
CodeMirror js代码加亮使用总结
Mar 25 #Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 #Javascript
在js中做数字字符串补0(js补零)
Mar 25 #Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 #Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 #Javascript
javascript作用域链与执行环境详解
Mar 25 #Javascript
You might like
php empty函数 使用说明
2009/08/10 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
javascript知识点收藏
2007/02/22 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python实现字符串和数字拼接
2020/03/02 Python
Python tornado上传文件的功能
2020/03/26 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
教育技术职业规划范文
2014/03/04 职场文书
好人好事演讲稿
2014/09/01 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS