jsカスタム右クリックメニューを実現
本論文の例では、jsの右クリックメニュー実現のための具体的なコードを共有します。
原理:
1.デフォルトの右クリックメニューをブロックする
2.右クリックして位置を取得し、カスタマイズメニューをクリック位置に配置する。
3.左ボタンをクリックして、カスタマイズメニューが消えます。
コードは以下の通りです
原理:
1.デフォルトの右クリックメニューをブロックする
2.右クリックして位置を取得し、カスタマイズメニューをクリック位置に配置する。
3.左ボタンをクリックして、カスタマイズメニューが消えます。
コードは以下の通りです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
*{
margin: 0;
/*padding: 0;*/
}
ul{
width: 120px;
height: 150px;
background-color: rgb(204,204,204);
font-size: 22px;
list-style: none;
line-height: 50px;
position: fixed;
display: none;
}
li{
background-color: rgb(238,238,238);
padding-left: 15px;
}
</style>
</head>
<body>
<ul id="ul">
<li> </li>
<li> </li>
<li> </li>
</ul>
<script>
// document oncontextmenu 。
// ， 。
var ul = document.getElementById('ul');
document.oncontextmenu=function(e){
e=e||window.event;
//
e.preventDefault?e.preventDefault():(e.returnValue=false);
//
var x=e.clientX;//
var y=e.clientY;
//
ul.style.display='block';
ul.style.top=y+'px';
ul.style.left=x+'px';
};
//
document.onclick=function () {
ul.style.display='none';
};
// li (onmouseover) (onmouseout)
var lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover=function () {
lis[i].style.backgroundColor='rgb(204,204,204)';
};
lis[i].onmouseout=function () {
lis[i].style.backgroundColor='rgb(238,238,238)';
}
}
</script>
</body>
</html>