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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php中explode函数用法分析
2014/11/15 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
pytorch训练imagenet分类的方法
2018/07/27 Python
python实现Flappy Bird源码
2018/12/24 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
python连接mysql有哪些方法
2020/06/24 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
C#实现启动一个进程
2016/10/01 面试题
物业客服专员岗位职责
2013/11/30 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
高中团支书竞选稿
2015/11/21 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
浅谈redis整数集为什么不能降级
2021/07/25 Redis