JS如何实现自定义鼠标右击菜单-html教程-PHP中文网

首页

web前端

html教程

JS如何实现自定义鼠标右击菜单

php中世界最好的语言

Feb 26, 2018 am 10:05 AM

javascript 实现自定义

这次给大家带来JS如何实现自定义鼠标右击菜单，JS实现自定义鼠标右击菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

自定义鼠标右击菜单要素：

禁止页面默认右击事件

设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）

鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）

效果图

代码如下：

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="right-click.css" />
</head>
<body>
    <div id="contain-friend">右击显示菜单</div>
    <label id="label1"></label>
    <div id="menu-friend">
        <div>
            <button id="btn1">菜单一</button>
        </div>
        <div>
            <button id="btn2">菜单二</button>
        </div>
    </div>
    <script src="right-click.js"></script>
</body>
</html>

登录后复制

HTML

JS代码

　　关于菜单的定位主要是在第一个if语句部分，后面为验证按钮效果。

　　menu1.style.left和menu1.style.top用于对菜单进行定位，由css样式表可知menu1的position属性定位为absolute，style.top定位相对于离它最近的position属性值不为static的父辈元素，此处即为body。

　　menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它，此处加上document.documentElement.scrollTop是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。

window.onload = function() {
    //以下为自定义右击菜单
    document.oncontextmenu = function(e) {
        //阻止执行浏览器默认右击事件
        e.preventDefault();
        //聊天室好友列表
        if (document.getElementById("menu-friend")) {
            var menu1 = document.getElementById("menu-friend");
            menu1.style.display = "block";
            document.getElementById("contain-friend").onmousedown = function(e) {　　　　　 //菜单定位
                menu1.style.left = e.offsetX + "px";
                menu1.style.top = document.documentElement.scrollTop + e.clientY + "px";
                //alert(menu1.style.top)
                if (document.getElementById("contain-friend")) {
                    if (e.button == 2) {
                        menu1.style.visibility = "visible";
                    } else {
                        menu1.style.visibility = "hidden";
                    }
                }
            }
        }
    }
    if (document.getElementById("btn1")) {
        document.getElementById("btn1").onmousedown = function(e) {
            document.getElementById("label1").innerHTML = "你点击了菜单一"
        }
    }
    if (document.getElementById("btn2")) {
        document.getElementById("btn2").onmousedown = function(e) {
            document.getElementById("label1").innerHTML = "你点击了菜单二"
        }
    }
    return false;
    //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行
}

登录后复制

JavaScript文件

CSS样式表

1/*自定义右击菜单*/

.contain {
    background-color: #D1CEBC;
    height: 100px;
    width: 300px;
}
.menu {
    width: 150px;
    background-color: white;
    visibility: hidden;
    position: absolute;
    box-shadow: 0px 0px 10px #D1CEBC
}
.menu-item {
    background-color: #fff;
    margin: 0;
}
.menu-item-btn {
    width: 146px;
    margin: 2px;
    border: 0;
    text-align: left;
    padding-left: 60px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #fff;
    color: #000;
}
.menu-item-btn:hover {
    background-color: #D1CEBC;
}

登录后复制

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7751

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1293

PHP教程

1234

显示更多

Related knowledge

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

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

华为手机如何实现双微信登录？ Mar 24, 2024 am 11:27 AM

华为手机如何实现双微信登录？随着社交媒体的兴起，微信已经成为人们日常生活中不可或缺的沟通工具之一。然而，许多人可能会遇到一个问题：在同一部手机上同时登录多个微信账号。对于华为手机用户来说，实现双微信登录并不困难，本文将介绍华为手机如何实现双微信登录的方法。首先，华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能，用户可以在手机上同

PHP编程指南：实现斐波那契数列的方法 Mar 20, 2024 pm 04:54 PM

编程语言PHP是一种用于Web开发的强大工具，能够支持多种不同的编程逻辑和算法。其中，实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中，将介绍如何使用PHP编程语言来实现斐波那契数列的方法，并附上具体的代码示例。斐波那契数列是一个数学上的序列，其定义如下：数列的第一个和第二个元素为1，从第三个元素开始，每个元素的值等于前两个元素的和。数列的前几个元

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

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

如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App

掌握Golang如何实现游戏开发的可能性 Mar 16, 2024 pm 12:57 PM

在当今的软件开发领域中，Golang（Go语言）作为一种高效、简洁、并发性强的编程语言，越来越受到开发者的青睐。其丰富的标准库和高效的并发特性使它成为游戏开发领域的一个备受关注的选择。本文将探讨如何利用Golang来实现游戏开发，并通过具体的代码示例来展示其强大的可能性。1.Golang在游戏开发中的优势作为一种静态类型语言，Golang在构建大型游戏系统

如何在Golang中实现精确除法运算 Feb 20, 2024 pm 10:51 PM

在Golang中实现精确除法运算是一个常见的需求，特别是在涉及金融计算或其它需要高精度计算的场景中。Golang的内置的除法运算符“/”是针对浮点数计算的，并且有时会出现精度丢失的问题。为了解决这个问题，我们可以借助第三方库或自定义函数来实现精确除法运算。一种常见的方法是使用math/big包中的Rat类型，它提供了分数的表示形式，可以用来实现精确的除法运算

PHP游戏需求实现指南 Mar 11, 2024 am 08:45 AM

PHP游戏需求实现指南随着互联网的普及和发展，网页游戏的市场也越来越火爆。许多开发者希望利用PHP语言来开发自己的网页游戏，而实现游戏需求是其中一个关键步骤。本文将介绍如何利用PHP语言来实现常见的游戏需求，并提供具体的代码示例。1.创建游戏角色在网页游戏中，游戏角色是非常重要的元素。我们需要定义游戏角色的属性，比如姓名、等级、经验值等，并提供方法来操作这些

See all articles

JS如何实现自定义鼠标右击菜单

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题