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.ui.draggable中文文档
Nov 24 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
JavaScript中的Function函数
Aug 27 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 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、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
javascript实现计算器功能
2020/03/30 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Apache部署Django项目图文详解
2019/07/30 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python 中如何写注释
2020/08/28 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
优秀医生事迹材料
2014/02/12 职场文书
幼儿园新年寄语
2014/04/03 职场文书
学习雷锋倡议书
2014/04/15 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书