JavaScript实现点击自制菜单效果
更新时间：2021年02月02日 08:34:04 作者：~嘘~禁止想象~
这篇文章主要为大家详细介绍了JavaScript实现点击自制菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
当我们点击右键时就不会弹出默认的菜单了，弹出了我设置的红框框。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了JavaScript BOM构成和常用事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
Invalid Host header问题该如何解决的几种方式
Invalid Host header是一个常见的错误信息,通常发生在Web应用程序中,下面这篇文章主要给大家介绍了关于Invalid Host header问题该如何解决的几种方式,需要的朋友可以参考下2024-09-09
这篇文章主要给大家介绍了7道关于JS this的面试题，来看看你能答对几个，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了正则表达式基本语法及表单验证操作,较为详细的分析了正则表达式的基本语法以及基于JS实现的表单正则验证操作相关实现技巧,需要的朋友可以参考下2017-04-04
这篇文章整理了JavaScript文件上传的常见问题，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了js控制小球在规定范围运动，碰到边界就改变运动方向，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了javascript 设计模式之享元模式,结合实例形式详细分析了javascript 设计模式之享元模式相关概念、原理、应用方法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了前端精度丢失问题解决之后端Long类型到前端的处理策略,在Web开发中前后端数据类型不匹配尤其是Long类型数据到前端可能导致精度丢失,文章探讨了此问题并提供三种解决方法,需要的朋友可以参考下2024-09-09
基于Arcgis for javascript实现百度地图ABCD marker的效果
本篇文章由脚本之家小编给大家分享的基于Arcgis for javascript实现百度地图ABCD marker的效果，需要的朋友一起学习吧2015-09-09
这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
最新评论