Javascript实现鼠标右键自定义特色菜单-js教程-PHP中文网

首页

web前端

js教程

Javascript实现鼠标右键自定义特色菜单

巴扎黑

Sep 06, 2017 am 10:19 AM

javascript js 自定义

JS屏蔽鼠标右键的两种方法，比较常用的一个JS小功能，用上这个代码后，浏览者在访问你网页的时候就不能点击右键了，点了也不会弹出右键菜单，本功能最好不要用的太多哦，有时候用户会反感的。

代码如下:

&lt;html>
&lt;head>
&lt;title>屏蔽鼠标右键&lt;/title>
&lt;/head>
&lt;body oncontextmenu=self.event.returnvalue=false>
第一种方法：在body标签里加上oncontextmenu=self.event.returnvalue=false;
&lt;br>
&lt;script language="javascript">
&lt;!--
function document.oncontextmenu()
{
return false;
}


function nocontextmenu()
{
if(document.all) {
event.cancelBubble=true;
event.returnvalue=false;
return false;
}
}
-->
&lt;/script>
第二种方法：在body里加入onmousedown="rclick()" oncontextmenu= "nocontextmenu()"
&lt;br>
&lt;script language="javascript">
&lt;!--
function rclick()
{
if(document.all) {
if (event.button == 2){
event.returnvalue=false;
}
}
}
-->
&lt;/script>
&lt;br>详细情况请查看代码。&lt;br>
&lt;br>现在点击你的鼠标右键，不起作用了。
&lt;/body>
&lt;/html>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助。

,两种JS实现屏蔽鼠标右键的方法,
"

在Web端，通常是不需要右键菜单，各个浏览器也有自己的右键菜单。但是对于一些特殊的网页，是需要右键菜单来增加用户体验的，比如百度音乐，QQ邮箱，相信大家都在Web端使用过右键菜单了，现在来分享一下如何实现，比较简单。

运行代码：

window.onload = function() {
      document.oncontextmenu = block;
      document.body.onmouseup = function(event) {
        if (!event) event = window.event;
        if (event.button == 2) {
          var x = event.pageX || event.clientX;
          var y = event.pageY || event.clientY;
          document.getElementById("contextMenu").style.left = x  "px";
          document.getElementById("contextMenu").style.top = y  "px";
          document.getElementById("contextMenu").style.display = "block";
        }
      }
      //阻止事件冒泡
      document.getElementById("contextMenu").onclick = function(event) {
        event.stopPropagation();
      }
      //点击其他地方隐藏
      document.onclick = function() {
        document.getElementById("contextMenu").style.display = "none";
      }
      for (var i = 0; i &lt; getElementsByClassName("contextMenuItem").length; i ) {
 
        getElementsByClassName("contextMenuItem")[i].onclick = function(event) {
          event = event ? event : window.event
          var target = event.srcElement ? event.srcElement : event.targe;
          document.getElementById("contextMenu").style.display = "none";
          //alert("您点击了： "  target.innerHTML);
           
        }
      }
 
    }
     
    function block(event) {
      if (window.event) {
        event = window.event;
        event.returnValue = false;
      } else event.preventDefault();
    }
    //兼容IE不支持getElementsByClassName
    function getElementsByClassName(className, root, tagName) {
      if (root) {
        root = typeof root == "string" ? document.getElementById(root) : root;
      } else {
        root = document.body;
      }
      tagName = tagName || "*";
      if (document.getElementsByClassName) { 
        return root.getElementsByClassName(className);
      } else {
        var tag = root.getElementsByTagName(tagName); 
        var tagAll = [];
        for (var i = 0; i &lt; tag.length; i ) {
          for (var j = 0, n = tag[i].className.split(" "); j &lt; n.length; j ) {
            if (n[j] == className) {
              tagAll.push(tag[i]);
              break;
            }
          }
        }
        return tagAll;
      }
    }

登录后复制

效果图：

以上是Javascript实现鼠标右键自定义特色菜单的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7509

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何在Netflix中快速设置自定义头像 Feb 19, 2024 pm 06:33 PM

Netflix上的头像是你流媒体身份的可视化代表。用户可以超越默认的头像来展示自己的个性。继续阅读这篇文章，了解如何在Netflix应用程序中设置自定义个人资料图片。如何在Netflix中快速设置自定义头像在Netflix中，没有内置功能来设置个人资料图片。不过，您可以通过在浏览器上安装Netflix扩展来实现此目的。首先，在浏览器上安装Netflix扩展的自定义个人资料图片。你可以在Chrome商店买到它。安装扩展后，在浏览器上打开Netflix并登录您的帐户。导航至右上角的个人资料，然后单击

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

Eclipse中自定义快捷键设置的方法 Jan 28, 2024 am 10:01 AM

如何在Eclipse中自定义快捷键设置？作为一名开发人员，在使用Eclipse进行编码时，熟练掌握快捷键是提高效率的关键之一。Eclipse作为一款强大的集成开发环境，不仅提供了许多默认的快捷键，还允许用户根据自己的偏好进行个性化的定制。本文将介绍如何在Eclipse中自定义快捷键设置，并给出具体的代码示例。打开Eclipse首先，打开Eclipse，并进入

edius自定义屏幕布局的操作流程 Mar 27, 2024 pm 06:50 PM

1、下图是edius默认的屏幕布局，默认的EDIUS窗口布局是横向版式，因此在单显示器环境中，许多窗口是重叠在一起的，且预览窗口为单窗口模式。2、您可以通过【视图】菜单栏启用【双窗口模式】，使预览窗口同时显示播放窗口和录制窗口。3、您可以通过【视图菜单栏>窗口布局>常规】来恢复默认屏幕布局。另外您还可以自定义适合您的布局方式，并保存为常用屏幕布局：将窗口拖动成适合自己的布局，然后点击【视图>窗口布局>保存当前布局>新建】，在弹出的【保存当前布局】小窗口中输入布局名称，单击确定

excel怎么自定义x轴和y轴？(excel坐标轴刻度如何自定义) Mar 14, 2024 pm 02:10 PM

　　在excel表格中，有时候可能需要插入坐标轴，能够更加直观地看到数据的变化趋势。还有些小伙伴不清楚怎么在表中插入坐标轴，接下来小编就跟大家分享一下excel自定义坐标轴刻度的方法吧。　　坐标轴插入方法：　　1、在excel界面中，选中数据。　　2、在插入界面中，点击插入柱形图或条形图。　　3、在展开的界面中，选择形图类型。　　4、在表格右击界面中，点击选择数据。　　5、在展开的界面中，进行自定义即可。

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。

See all articles

Javascript实现鼠标右键自定义特色菜单

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题