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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript生成随机数的方法
May 16 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
vue实现多级菜单效果
Oct 19 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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中curl和file_get_content的区别
2014/05/10 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
nginx 设置多个站跨域
2021/03/09 Servers
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
offsetParent 算法分析
2010/04/05 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python 列表理解及使用方法
2017/10/27 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python发送邮件脚本
2018/05/22 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
破解安装Pycharm的方法
2018/10/19 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python flask中动态URL规则详解
2019/11/22 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
珍珠奶茶店创业计划书
2014/01/11 职场文书
模范教师事迹材料
2014/02/10 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
教师党员自我评价范文
2015/03/04 职场文书
大学生入党自传2015
2015/06/26 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server