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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
js日期联动示例
May 02 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
jquery提交form表单简单示例分享
2014/03/03 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
Python Socket编程入门教程
2014/07/11 Python
Python的Django框架安装全攻略
2015/07/15 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python新手学习标准库模块命名
2020/05/29 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
土木工程个人自荐信范文
2013/11/30 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
财务会计专业求职信
2014/06/09 职场文书
代理人委托书
2014/08/01 职场文书
微信搭讪开场白
2015/05/28 职场文书
户外拓展训练感想
2015/08/07 职场文书