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

更新時(shí)間：2020年05月18日 17:02:32 作者：百事可口

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下

原理：

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?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)離開(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)的五星評(píng)價(jià)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評(píng)價(jià)功能,結(jié)合實(shí)例形式分析了微信小程序五星評(píng)價(jià)相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下
2019-04-04
這篇文章主要介紹了javascript數(shù)據(jù)結(jié)構(gòu)之雙鏈表插入排序?qū)崿F(xiàn)方法,較為詳細(xì)的分析了插入排序的原理及雙鏈表插入排序的實(shí)現(xiàn)技巧,對于學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11

mui js控制開關(guān)狀態(tài)、修改switch開關(guān)的值方法

今天小編就為大家分享一篇mui js控制開關(guān)狀態(tài)、修改switch開關(guān)的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

2019-09-09

一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼

這是一個(gè)JavaScript去除字符串末尾的空白實(shí)例代碼，很簡單，但很實(shí)用，喜歡的朋友可以參考下

2014-09-09

JavaScript如何獲取父級(jí)元素和子級(jí)元素代碼示例

最近工作中總遇到取各種父啊子啊,每次都得查,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何獲取父級(jí)元素和子級(jí)元素的相關(guān)資料,文中通過代碼介紹的非常詳細(xì)，需要的朋友可以參考下

2024-04-04

echarts整合多個(gè)類似option的方法實(shí)例

這篇文章主要給大家介紹了關(guān)于echarts整合多個(gè)類似option的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

2018-07-07