下载鸥 > 网站下载 > 开发教程 > JS/JQuery

JS怎样添加网站右键菜单?

275 2021-05-22 10:00:02

收藏

js右键控制一方面可以简单防止他人审查代码,另一方面可以更好的自定义右键属性。今天我们简单介绍JS怎样添加右键菜单。

JS怎样添加网站右键菜单?
 

效果演示

JS怎样添加网站右键菜单?
 

开发原理

1、在用户右键时获取右键位置,然后展示需要展示的菜单。而在用户左键时,关闭右键菜单。

2、在用户右键的位置展示出右键菜单这一步很简单,只需要添加一个绝对定位的盒子,然后将这个盒子移动到右键的位置即可。
 

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS右键菜单功能实现</title>
</head>
<body>
    <script src="/js/control.js"></script>
</body>
</html>

 

js代码

// 创建右键菜单盒子
let rightMenuDiv = document.createElement("div");
// 计数,用于关闭右键菜单
let rightMenuCount = 0;
// 设置右键菜单样式
rightMenuDiv.style.backgroundColor = "red";
rightMenuDiv.style.position = "absolute";
// 防止点击右键菜单中的内容的时候冒泡,导致关闭右键菜单
rightMenuDiv.addEventListener("mousedown", (event)=>{event.stopPropagation();})
// 给右键菜单添加内容(子节点)
let rightMenuChildLink = document.createElement("a");
rightMenuChildLink.appendChild(document.createTextNode("www.gray-ice.com"));
rightMenuChildLink.setAttribute("href", "https://www.gray-ice.com");
rightMenuDiv.appendChild(rightMenuChildLink);

// 展示右键菜单
function showRightMenu(x, y)
{
    // 因为右键菜单有postion: absolute属性,已经脱标了,只要父元素没有定位,添加到哪都行,我这里是随便添加到底部了。
    document.body.appendChild(rightMenuDiv);
    // 调整右键菜单的位置,将其至于当前鼠标所在的位置上。
    rightMenuDiv.style.left = String(x) + "px";
    rightMenuDiv.style.top = String(y) + "px";
}
// 这里利用了事件冒泡,无论在哪个节点上点击的右键,最终都会冒泡到document上
document.addEventListener("contextmenu", function(event){
    console.log(event);
    // 避免触发浏览器的右键菜单
    event.preventDefault();
    // 显示自定义的右键菜单
    showRightMenu(event.pageX, event.pageY);
    // 将当前右键菜单的状态设置为 打开
    rightMenuCount = 1;
})

// 关闭右键菜单
document.addEventListener("mousedown", function(event){
    // 如果右键菜单当前是打开状态
    if(rightMenuCount)
    {
        // 如果按下的是主键
        if(event.button === 0)
        {
            // 从body上移除右键菜单
            document.body.removeChild(rightMenuDiv);
            // 将右键菜单的状态设置为关闭
            rightMenuCount = 0;
        }
    }
})

// 创建100个p标签,用来测试页面高度变化是否会影响右键菜单的行为
function create100P()
{
    let str = "";
    for(let i = 0; i < 100; i++)
    {
        str += `<p>${i}</p>\n`;
    }
    let ps = document.createElement("div");
    document.body.appendChild(ps);
    ps.innerHTML = str;
}
create100P();


这样,我们就实现了JS添加右键菜单的功能。

本文来自gray-ice个人博客,原文链接JS添加右键菜单

本文地址:https://xzo.com.cn/develop/js/975.html

有帮助,很赞!

信息来源:gray-ice
信息标签
导出教程 下载word版教程
发表评论 共有条评论
关于JS/JQuery


JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。

推荐JS/JQuery开发教程
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 450
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...

0 448
怎样点击清除ul里的全部li信息?
怎样点击清除ul里的全部li信息?

在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...

1 391
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 357
JS获取当前时间、日期、星期并每秒更新一次
JS获取当前时间、日期、星期并每秒更新一次

很多网站上会有当前年月日、星期、时间的展示。这个展示用php做未免浪费性...

0 303
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 303
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 473
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 536
随机JS/JQuery开发教程
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

网站日常访客主要是windows和mac os两种操作系统,如果网站提供资源下载,则需...

0 1537
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 473
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 371
相对路径和绝对路径要如何选择?
相对路径和绝对路径要如何选择?

表示路径的方法有两种:相对路径,绝对路径。我们何时用相对路径,何时用绝对路径...

0 354
JS控制输入字数的两个方案
JS控制输入字数的两个方案

我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...

0 303
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 289
JS点击复制data-*属性(支持多个元素)
JS点击复制data-*属性(支持多个元素)

分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...

0 295
js怎样判断现在是早上中午还是晚上
js怎样判断现在是早上中午还是晚上

一些网站在会员中心开发了问候页,例如问候客户早上好、下午好、晚上好等等。...

0 461
客服QQ:341553759
点击咨询 常见问题 >
官方交流群:90432500
点击加入