Javascript自定义右键菜单
程序员文章站
2022-05-30 20:55:17
...
html Javascript自定义右键菜单
内容需要的技术要点
- BOM的操作
- 鼠标事件
- css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding: 0;
margin: 0;}
ul{
width: 200px;
background-color: #2aabd2;
list-style: none;
line-height: 30px;
}
ul li{
color: #ffffff;
height: 30px;
padding: 5px 10px;
transiton:0.3s;
}
ul li:hover{
color: #122b40;
background-color: #afd9ee;
cursor:pointer
}
</style>
</head>
这里我在设置一下菜单的样式让我的菜单好看一点
<body>
<ul>
<li>HTML弹窗</li>
<li>HTML百度一下的网页</li>
<li>HTML百度一下写在这里</li>
<li>HTML关闭窗口</li>
</ul>
这里我们看到在 右上角 我们想到 需要 获取鼠标的位置
第一步需要
禁用系统的右键
document.oncontextmenu =function(){
return false;
第二步
在添加事件 右键抬起 设置 右键的设置为2
鼠标 左键为 0 滚轮键 为 1 右键 为 2
第三步
在 ul样式 display：none 设置ul 隐藏 和设置 鼠标位置
display: none;
position: absolute;
经过判断后 就能检测到鼠标的操作 在正常不显示 ul 右键后 显示 同时跟随鼠标位置
document.onmouseup =function (eve) {
if (eve.button==2){
ul.style.display ='inline-block'
ul.style.left =eve.clientX+'px'
ul.style.top = eve.clientY+'px'
}else{
ul.style.display = 'none'
}
}
<script>
var ul = document.querySelector('ul')
document.oncontextmenu =function(){
return false;
}
document.onmouseup =function (eve) {
if (eve.button==2){
ul.style.display ='inline-block'
ul.style.left =eve.clientX+'px'
ul.style.top = eve.clientY+'px'
}else{
ul.style.display = 'none'
}
}
ul.onmousedown =function (eve) {
if(eve.target.innerHTML =='HTML弹窗'){
alert('HTML警示框')
}else if(eve.target.innerHTML =='HTML百度一下写在这里'){
var han = prompt('搜索 请输入你的内容')
window.open('http://www.baidu.com/s?wd='+han)
}else if (eve.target.innerHTML =='HTML关闭窗口'){
if(confirm('你确定要关闭窗口吗')){
window.close()
}
}else{
}
}
</script>
在 按下后的操作 就可以随你操作 了
上一篇： 哈哈哈哈哈哈哈坏女孩
下一篇： 上古三大邪刀是什么?充满黑暗诅咒!