JavaScript实现点击自制菜单效果
作者：~嘘~禁止想象~ 时间：2024-05-02 17:24:53
本文实例为大家分享了JavaScript实现点击自制菜单效果的具体代码，供大家参考，具体内容如下
应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果
第一种方式，通过创建元素的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
}
.menu {
width: 100px;
height: 280px;
background-color: red;
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
</head>
<body>
<script>
var Bon = true;
var menu = null;
document.oncontextmenu = function(event) {
if (Bon) {
menu = document.createElement("div");
menu.classList.add("menu");
document.body.appendChild(menu);
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
menu.style.display = "block";
Bon = false;
event.preventDefault();
} else {
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
event.preventDefault();
}
}
document.onmousedown = function(e) {
if (e.button == 0) {
var menu = document.querySelector(".menu");
document.body.removeChild(menu);
Bon = true;
}
}
</script>
</body>
</html>
第二种：通过隐藏元素的方式
<div class="menu"></div>
<script>
var menu = document.querySelector(".menu");
document.oncontextmenu = function(event) {
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
menu.style.display = "block";
event.preventDefault();
}
document.onmousedown = function(e) {
if (e.button == 0) {
menu.style.display = "none";
}
}
</script>
当我们点击右键时就不会弹出默认的菜单了，弹出了我设置的红框框。
来源：https://blog.csdn.net/weixin_45773503/article/details/113425737
标签：js,点击,菜单
0
投稿猜你喜欢
创建pycharm的自定义python模板方法
2021-01-11 04:46:41
javascript实现拼图游戏
2024-05-03 11:11:04
网页设计详细教程之XML简便省力技巧五则
2008-05-23 14:37:00
Python3网络爬虫开发实战之极验滑动验证码的识别
2022-10-02 22:06:14
MySQL的索引原理以及查询优化详解
2024-01-13 14:04:38
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2021-11-06 01:52:14
详解Go-JWT-RESTful身份认证教程
2024-02-17 07:44:56
解析MySQL设置当前时间为默认值的方法
2024-01-20 08:23:39
详解Python如何批量检查图像是否可用
2021-10-03 13:42:07
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2021-09-14 17:03:46
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2021-09-26 00:05:53
Linux下C连接MySQL出现错误解决一例
2008-12-29 13:17:00
pandas取dataframe特定行列的实现方法
2022-03-05 15:51:29
python借助ChatGPT读取.env实现文件配置隔离保障私有数据安全
2022-12-26 17:54:13
vue组件定义，全局、局部组件，配合模板及动态组件功能示例
2024-05-05 09:09:59
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2023-04-27 19:46:34
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2023-05-28 02:54:43
np.concatenate()函数的具体使用
2023-06-21 11:15:19
python字符串操作详析
2022-09-14 04:57:08
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2024-01-19 16:38:39
