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

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

389 2021-05-22 10:00:02

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

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开发教程
JS验证手机是否11位的做法
JS验证手机是否11位的做法

在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...

1 436
jquery怎样获取textarea用户输入的行数?
jquery怎样获取textarea用户输入的行数?

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

0 565
$(window).height() 和 $(document).height()有什么不同?
$(window).height() 和 $(document).height()有什么不同?

我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...

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

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

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

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

0 410
js判断windows操作系统还是mac os系统
js判断windows操作系统还是mac os系统

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

0 1901
js网站视频播放器ckplayer和dplayer优缺点分析
js网站视频播放器ckplayer和dplayer优缺点分析

dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...

0 1828
JS获取浏览器语言(中英文多语言站)并自动跳转代码
JS获取浏览器语言(中英文多语言站)并自动跳转代码

如果是多语言站点,主动获取浏览器默认语言并自动进行跳转可以有效降低跳出率...

0 1039
推荐插件
帝国cms联想词搜索高级搜索插件下载
帝国cms联想词搜索高级搜索插件下载

帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...

0 751
帝国cms百度文字识别ocr接口对接插件
帝国cms百度文字识别ocr接口对接插件

许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...

0 459
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 516
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 405
帝国cms自动生成文章新闻目录插件下载
帝国cms自动生成文章新闻目录插件下载

用户体验是我们的需求,百度蜘蛛的认可更是我们的需求。毕竟,没有收录排名,何来...

0 1136
帝国cms访问统计ip地址链接与封禁插件下载
帝国cms访问统计ip地址链接与封禁插件下载

下载鸥开发了这款帝国cms封禁ip插件,自动记录访问情况,让我们可以更快的识别...

0 997
帝国cms纳米数据接口(足球比赛中最新数据)
帝国cms纳米数据接口(足球比赛中最新数据)

帝国cms 对接纳米数据(www.nami.com)接口,本接口主要接收、整理足球比赛实时数...

0 334
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

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