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 相关文章推荐
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
利用Python命令行传递实例化对象的方法
2016/11/02 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
2013年入党人员的自我鉴定
2013/10/25 职场文书
超市业务员岗位职责
2013/12/05 职场文书
市场总经理岗位职责
2014/04/11 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书