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 相关文章推荐
Javascript 学习笔记 错误处理
Jul 30 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vue的路由映射问题及解决方案
Oct 14 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
一个显示天气预报的程序
2006/10/09 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
python去除文件中重复的行实例
2018/06/29 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
总经理岗位职责描述
2014/02/08 职场文书
幼儿老师求职信
2014/06/30 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
个人党性锻炼总结
2015/03/05 职场文书
团日活动总结格式
2015/05/11 职场文书
广播体操比赛主持词
2015/06/29 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python