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

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

成都創(chuàng)新互聯(lián)公司2013年成立，公司以成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶(hù)上千余家，涉及國(guó)內(nèi)多個(gè)省份客戶(hù)。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專(zhuān)業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。通過(guò)專(zhuān)業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶(hù)提供各種風(fēng)格的特色服務(wù)。

原理：

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)擊右鍵的時(shí)候，獲得點(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';
 };
 //給每個(gè)li添加 鼠標(biāo)進(jìn)入(onmouseover)和鼠標(biāo)離開(kāi)(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)容，是不是對(duì)js實(shí)現(xiàn)自定義右鍵菜單的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：js實(shí)現(xiàn)自定義右鍵菜單的方法
URL地址：http://jinyejixie.com/article20/johpco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站排名、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站收錄、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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