js實現(xiàn)自定義右鍵菜單
更新時間：2020年05月18日 17:02:32 作者：百事可口
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)右鍵菜單的具體代碼，供大家參考，具體內(nèi)容如下
原理：
1.屏蔽默認(rèn)的右鍵菜單
2.點擊右鍵獲取位置，讓自定義菜單到點擊位置上
3.點擊左鍵，自定義菜單消失
代碼如下
<!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)的右鍵菜單的行為。
//點擊右鍵的時候，獲得點擊的位置。
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';
};
//點擊左鍵 自定義菜單消失
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的五星評價功能,結(jié)合實例形式分析了微信小程序五星評價相關(guān)的界面布局、事件響應(yīng)等操作技巧,需要的朋友可以參考下2019-04-04
mui js控制開關(guān)狀態(tài)、修改switch開關(guān)的值方法
今天小編就為大家分享一篇mui js控制開關(guān)狀態(tài)、修改switch開關(guān)的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09 
這是一個JavaScript去除字符串末尾的空白實例代碼，很簡單，但很實用，喜歡的朋友可以參考下
2014-09-09 
最近工作中總遇到取各種父啊子啊,每次都得查,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript如何獲取父級元素和子級元素的相關(guān)資料,文中通過代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2024-04-04 
這篇文章主要給大家介紹了關(guān)于echarts整合多個類似option的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07 
ECMAScript中var let const常見問題及區(qū)別詳解
這篇文章主要為大家介紹了ECMAScript中var let const常見問題及區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02 
javascript保留兩位小數(shù)的實現(xiàn)方法你了解嗎
這篇文章主要為大家介紹了javascript保留兩位小數(shù)的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01 
javascript實現(xiàn)密碼強(qiáng)度顯示
這篇文章主要介紹了使用javascript實現(xiàn)密碼強(qiáng)度顯示，十分實用的功能，從個人項目中移植出來的，分享給大家，希望大家能夠喜歡。
2015-03-03 
TopList標(biāo)簽和JavaScript結(jié)合兩例
TopList標(biāo)簽和JavaScript結(jié)合兩例...
2007-08-08