溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js實(shí)現(xiàn)自定義右鍵菜單的方法

發(fā)布時間：2020-07-23 15:31:47 來源：億速云 閱讀：146 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了js實(shí)現(xiàn)自定義右鍵菜單的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

原理：

1.屏蔽默認(rèn)的右鍵菜單

2.點(diǎn)擊右鍵獲取位置，讓自定義菜單到點(diǎn)擊位置上

3.點(diǎn)擊左鍵，自定義菜單消失

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右鍵菜單練習(xí)</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>復(fù)制</li>
 <li>剪切</li>
 <li>粘貼</li>
</ul>
<script>
 //給document 添加 oncontextmenu 事件 取消默認(rèn)的右鍵菜單的行為。
 //點(diǎn)擊右鍵的時候，獲得點(diǎn)擊的位置。
 var ul = document.getElementById('ul');
 document.oncontextmenu=function(e){
 e=e||window.event;
 //屏蔽樣式
 e.preventDefault&#63;e.preventDefault():(e.returnValue=false);
 //獲取坐標(biāo)
 var x=e.clientX;//視口的位置
 var y=e.clientY;

 //顯示菜單
 ul.style.display='block';
 ul.style.top=y+'px';
 ul.style.left=x+'px';
 };
 //點(diǎn)擊左鍵 自定義菜單消失
 document.onclick=function () {
 ul.style.display='none';
 };
 //給每個li添加 鼠標(biāo)進(jìn)入(onmouseover)和鼠標(biāo)離開(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>

看完上述內(nèi)容，是不是對js實(shí)現(xiàn)自定義右鍵菜單的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手