JavaScript 右键菜单
上下文菜单是一种约定，允许我们创建自定义右键菜单。
右键单击菜单是单击鼠标右键时预览的简单面板。菜单的这些选项可以有不同的功能发挥。
使用 oncontextmenu 事件启用 JavaScript 右键菜单
每次确保右键单击时，oncontextmenu 事件将启用动态创建 div 元素。
我们将为菜单定位设置样式。如果我们不设置事件派生位置，菜单将在页面的一部分上是静态的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<style>
#contextMenu {
position: fixed;
background:teal;
color: white;
cursor: pointer;
border: 1px black solid
}
#contextMenu > p {
padding: 0 1rem;
margin: 0
}
#contextMenu > p:hover {
background: black;
color: white;
}
</style>
</head>
<body>
<script>
oncontextmenu = (e) => {
e.preventDefault()
var menu = document.createElement("div")
menu.id = "contextMenu"
menu.style = `top:${e.pageY-10}px;left:${e.pageX-40}px`
menu.onmouseleave = () => contextMenu.outerHTML = ''
menu.innerHTML = "<p onclick='alert(`1 It is!`)'>Choose 1</p><p onclick='alert(`2 It is!`)'>Choose 2</p><p onclick='alert(`3 It is!`)'>Choose 3</p><p onclick='alert(`Thank you!`)'>No thanks</p>"
document.body.appendChild(menu)
}
</script>
</body>
</html>
输出：
在 oncontextmenu 事件中，我们设置 onmouseleave 事件以使选项框在光标从菜单中移除时消失。
选择一个选项时，我们将在 Windows 警报中获得所需的输出。这是在右键单击时创建上下文菜单的方法。
相关文章
使用 JavaScript 编码 HTML
发布时间：2024/03/20 浏览次数：83 分类：JavaScript
-
本教程将教你如何使用不同的方法对 HTML 字符串进行编码。这些方法的共同点是字符串替换，它替换了具有潜在危险的字符。
使用 JavaScript 加载外部 HTML 文件
发布时间：2024/03/20 浏览次数：133 分类：JavaScript
-
本文演示了如何使用 JavaScript 和 jQuery 加载外部 html 文件。
JavaScript 延迟后重定向页面
发布时间：2024/03/20 浏览次数：87 分类：JavaScript
-
本教程展示了如何使用 JavaScript 中的 setTimeout 方法在延迟后重定向页面。
在 JavaScript 中 use strict
发布时间：2024/03/20 浏览次数：56 分类：JavaScript
-
在本文中，学习 JavaScript 中的 use strict 特性。我们将通过不同的示例了解如何在 JavaScript 代码语句中创建和执行 use strict 关键字。
在 JavaScript 中更改输入值
发布时间：2024/03/20 浏览次数：69 分类：JavaScript
-
我们可以使用 JavaScript 中的 value 属性或 setAttribute() 函数更改输入值。
