溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了js實現自定義右鍵菜單的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
原理：
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>看完上述內容，是不是對js實現自定義右鍵菜單的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
