162 lines
3.9 KiB
HTML
162 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>自定义右键菜单</title>
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2223989_98p80aj9eus.css">
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
<ul class="menu hidden">
|
|
<li>
|
|
<i class="iconfont icon-vue"></i>
|
|
<span>Vue 文档</span>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-react"></i>
|
|
<span>React 文档</span>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-angular"></i>
|
|
<span>Angular 文档</span>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-typescript"></i>
|
|
<span>Typescript 文档</span>
|
|
</li>
|
|
<li>
|
|
<i class="iconfont icon-shuaxin"></i>
|
|
<span>刷新</span>
|
|
</li>
|
|
</ul>
|
|
</body>
|
|
<script>
|
|
|
|
var body = document.querySelector("body");
|
|
var menu = $(".menu");
|
|
// 获取虚拟dom
|
|
|
|
// console.dir(menu);
|
|
|
|
|
|
var screenHeight = window.innerHeight,
|
|
screenWidth = window.innerWidth;
|
|
|
|
body.oncontextmenu = function (e) {
|
|
console.log(e);
|
|
var { x, y } = e;
|
|
|
|
// console.log(x, y);
|
|
|
|
// 获取点击坐标
|
|
menu.style.left = `${x}px`
|
|
menu.style.top = `${y}px`
|
|
// console.log(menu.className);
|
|
// 获取类名为menu hidden
|
|
|
|
// menu.className = "menu"
|
|
// 覆盖类名 删掉了 hidden
|
|
|
|
// menu.className = "menu hidden"
|
|
// 显示类名 加上了 hidde
|
|
|
|
// console.log(menu.className);
|
|
if ((screenHeight - y < 240) && (screenWidth - x < 180)) {
|
|
console.log("屏幕右下角");
|
|
menu.style = `
|
|
left: ${x - 180}px;
|
|
top: ${y - 240}px;`
|
|
}
|
|
|
|
else if (screenHeight - y < 240) {
|
|
console.log("鼠标在屏幕最下面");
|
|
menu.style = `
|
|
left: ${x}px;
|
|
top: ${y - 240}px;`
|
|
}
|
|
|
|
else if (screenWidth - x < 180) {
|
|
console.log("屏幕最右边");
|
|
menu.style = `
|
|
left: ${x - 180}px;
|
|
top: ${y}px;`
|
|
}
|
|
|
|
else {
|
|
menu.style = `
|
|
left: ${x}px;
|
|
top: ${y}px;`
|
|
}
|
|
|
|
|
|
menu.classList.remove("hidden")
|
|
return false
|
|
}
|
|
|
|
|
|
body.onclick = function (e) {
|
|
console.log("body被点击", e);
|
|
hiddenMenu()
|
|
|
|
}
|
|
|
|
// menu.onclick = function (e) {
|
|
// e.stopPropagation()
|
|
// console.log("menu被点击", e);
|
|
|
|
// }
|
|
// 阻止事件冒泡
|
|
// _(".menu li").forEach(function () {})
|
|
_(".menu li").forEach((v, i) => {
|
|
v.onclick = (e) => {
|
|
e.stopPropagation()
|
|
switch (i) {
|
|
case 0:
|
|
open("https://cn.vuejs.org/")
|
|
break;
|
|
case 1:
|
|
open("https://react.docschina.org/")
|
|
break;
|
|
case 2:
|
|
open("https://angular.cn/")
|
|
break;
|
|
case 3:
|
|
open("https://www.tslang.cn/")
|
|
break;
|
|
case 4:
|
|
location.reload()
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
// 功能执行完了关菜单
|
|
hiddenMenu()
|
|
}
|
|
})
|
|
|
|
|
|
function hiddenMenu() {
|
|
// 为menu菜单添加隐藏类名
|
|
menu.classList.add("hidden")
|
|
// menu.classList.remove("hidden")
|
|
}
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</html> |