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 相关文章推荐
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
angular十大常见问题
Mar 07 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
js利用iframe实现选项卡效果
Aug 09 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Python中 map()函数的用法详解
2018/07/10 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
py-charm延长试用期限实例
2019/12/22 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python Matplotlib模块的使用
2020/09/16 Python
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
What is view? why do we have view?
2012/06/22 面试题
新学期家长寄语
2014/01/19 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
会议主持人开场白台词
2015/05/28 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL