请编写代码阻止页面上鼠标右键弹出默认菜单
时间: 2023-04-24 19:06:28 浏览: 140
以下是一种阻止页面上鼠标右键弹出默认菜单的代码:
```javascript
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
```
这段代码使用了addEventListener()方法来监听contextmenu事件,当事件触发时,调用preventDefault()方法来阻止默认行为,即弹出右键菜单。
相关问题
html 实现鼠标右键弹出输入框
要实现鼠标右键点击弹出输入框,可以通过以下步骤进行:
1. 在 HTML 文件中,创建一个 div 元素,作为弹出框的容器,并设置其样式,如下所示:
```html
<div id="context-menu" style="display:none; position:absolute; background-color:#FFF; border:1px solid #CCC; padding:10px;"></div>
```
2. 编写 JavaScript 代码,监听鼠标右键点击事件,并在事件发生时,显示弹出框。
```javascript
document.addEventListener("contextmenu", function(e) {
e.preventDefault(); // 阻止默认右键菜单
var menu = document.getElementById("context-menu");
menu.style.display = "block";
menu.style.left = e.clientX + "px";
menu.style.top = e.clientY + "px";
});
```
3. 在弹出框中添加输入框,并在需要时获取输入框的值。
```javascript
var menu = document.getElementById("context-menu");
menu.innerHTML = '<input type="text" id="input-box" />';
var inputBox = document.getElementById("input-box");
var inputValue = inputBox.value;
```
完整的示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>右键弹出输入框</title>
</head>
<body>
<div id="context-menu" style="display:none; position:absolute; background-color:#FFF; border:1px solid #CCC; padding:10px;"></div>
<script>
document.addEventListener("contextmenu", function(e) {
e.preventDefault(); // 阻止默认右键菜单
var menu = document.getElementById("context-menu");
menu.style.display = "block";
menu.style.left = e.clientX + "px";
menu.style.top = e.clientY + "px";
menu.innerHTML = '<input type="text" id="input-box" />';
var inputBox = document.getElementById("input-box");
inputBox.focus();
document.addEventListener("click", function() {
var inputValue = inputBox.value;
console.log(inputValue);
menu.style.display = "none";
});
});
</script>
</body>
</html>
```
阅读全文
相关推荐

















