js oncontextmenu事件使用详解

发布时间 - 2026-01-11 00:22:20    点击率:

定义和使用

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>


# js  # oncontextmenu  # 右键  # 右键菜单  # 鼠标右键  # 按下  # 左键  # 鼠标  # 点这里  # 右击  # 另存  # 版中  # 被人  # 请不要  # 工具下载  # 单击  # 点击鼠标  # 禁止复制  # 组合键  # document  # return  # contextmenu 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel怎么调用外部API_Laravel Http Client客户端使用  详解Huffman编码算法之Java实现  Android滚轮选择时间控件使用详解  LinuxShell函数封装方法_脚本复用设计思路【教程】  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  详解Android图表 MPAndroidChart折线图  免费视频制作网站,更新又快又好的免费电影网站?  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  如何在宝塔面板中修改默认建站目录?  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Laravel如何实现本地化和多语言支持?(i18n教程)  Java垃圾回收器的方法和原理总结  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  Laravel如何使用查询构建器?(Query Builder高级用法)  如何快速搭建高效服务器建站系统?  如何用AI帮你把自己的生活经历写成一个有趣的故事?  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  JavaScript中的标签模板是什么_它如何扩展字符串功能  如何快速上传建站程序避免常见错误?  js实现点击每个li节点,都弹出其文本值及修改  Laravel如何生成和使用数据填充?(Seeder和Factory示例)  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  java获取注册ip实例  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  大连网站制作费用,大连新青年网站,五年四班里的视频怎样下载啊?  免费制作统计图的网站有哪些,如何看待现如今年轻人买房难的情况?  html如何与html链接_实现多个HTML页面互相链接【互相】  UC浏览器如何设置启动页 UC浏览器启动页设置方法  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  如何利用DOS批处理实现定时关机操作详解  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  如何在阿里云完成域名注册与建站?  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  nodejs redis 发布订阅机制封装实现方法及实例代码  网站制作壁纸教程视频,电脑壁纸网站?  油猴 教程,油猴搜脚本为什么会网页无法显示?  Laravel如何使用Blade模板引擎?(完整语法和示例)  Java解压缩zip - 解压缩多个文件或文件夹实例  Thinkphp 中 distinct 的用法解析  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  Linux系统命令中tree命令详解  重庆市网站制作公司,重庆招聘网站哪个好?  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  Python高阶函数应用_函数作为参数说明【指导】  Laravel如何自定义错误页面(404, 500)?(代码示例)