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 基于原型的对象(创建、调用)
Oct 16 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP如何实现跨域
2016/05/30 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue中的scope使用详解
2017/10/29 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
python递归计算N!的方法
2015/05/05 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
python黑魔法之编码转换
2016/01/25 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python实现通讯录功能
2018/02/22 Python
python找出完数的方法
2018/11/12 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
个人简历自我评价
2014/01/06 职场文书
收银员岗位职责
2014/02/07 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
关于 Python json中load和loads区别
2021/11/07 Python