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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
理解JS事件循环
Jan 07 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
javascript流程控制语句集合
Sep 18 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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 Session 变量的使用方法详解与实例代码
2013/09/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
prototype1.4中文手册
2006/09/22 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python 多线程的实例详解
2017/09/07 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
用python制作个视频下载器
2021/02/01 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
毕业生个人求职自荐信
2014/02/26 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
探亲假请假条
2014/04/11 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
法人授权委托书
2014/09/16 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技