这几天在写我的个人博客,想多提醒别人点赞就模拟了一个右键点击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<style>
#test{
width:130px; margin:auto; border:1px solid pink;
cursor:pointer;
display:none;
position:fixed;
z-index:999;
}
</style>
<body>
<script>
window.onload = function(){
let rbox = document.querySelector("#test");
//去掉默认的contextmenu事件,否则会和右键事件同时出现。
document.oncontextmenu = function(e){
e.preventDefault();
};
document.onmousedown = function(e){
// console.log(e);
if(e.button ==2){
// alert("你点了右键");
rbox.style.display="block";
rbox.style.left = e.x + "px";
rbox.style.top = e.y + "px";
}else if(e.button ==0){
rbox.style.display="none";
}else if(e.button ==1){
// alert("你点了滚轮");
}
}
}
</script>
<div id="test">
<ul class="subnav">
<li>点赞</li>
<li>评论</li>
<li>回首页</li>
</ul>
</div>
</body>
</html>