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 相关文章推荐
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php批量上传的实现代码
2013/06/09 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
详解javascript void(0)
2020/07/13 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Python选课系统开发程序
2016/09/02 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
开业主持词
2014/03/21 职场文书
酒店端午节活动方案
2014/08/26 职场文书
民政局个人整改措施
2014/09/24 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
python 爬取吉首大学网站成绩单
2021/06/02 Python
解析redis hash应用场景和常用命令
2021/08/04 Redis