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)離開(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Typescript協(xié)變與逆變簡(jiǎn)單理解
深入學(xué)習(xí)TypeScript類(lèi)型系統(tǒng)的話(huà)，逆變、協(xié)變、雙向協(xié)變、不變是繞不過(guò)去的概念。這些概念看起來(lái)挺高大上的，其實(shí)并不復(fù)雜，這篇文章我們就來(lái)學(xué)習(xí)下協(xié)變和逆變吧2022-10-10
js-FCC算法-No repeats please字符串的全排列(詳解)
下面小編就為大家?guī)?lái)一篇js-FCC算法-No repeats please字符串的全排列(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送短信驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS是一門(mén)計(jì)算機(jī)編程語(yǔ)言，是一門(mén)動(dòng)態(tài)語(yǔ)言也稱(chēng)為腳本語(yǔ)言，是解析型編程語(yǔ)言。需要了解跟多2012-11-11
Valerio 發(fā)布了 Mootools...2006-09-09
ElementPlus?Tag標(biāo)簽用法小結(jié)
這篇文章主要介紹了ElementPlus?Tag標(biāo)簽用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
本文主要給大家簡(jiǎn)單介紹了是什么是DOM、動(dòng)態(tài)操作DOM元素的方法、使用jsjs操作樣式以及Form對(duì)象的簡(jiǎn)介，是個(gè)人對(duì)于javascript中的DOM的理解的總結(jié)，推薦給小伙伴們。2015-03-03
js 距離某一時(shí)間點(diǎn)時(shí)間是多少實(shí)現(xiàn)代碼
距離某一時(shí)間點(diǎn)時(shí)間是多少，在本文將為大家介紹下js中是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
javascript如何操作HTML下拉列表標(biāo)簽
下拉列表在網(wǎng)站前端開(kāi)發(fā)中經(jīng)常遇到，如何操作html下拉列表標(biāo)簽，本篇文章給大家詳解javascript如何操作html下拉列表標(biāo)簽，需要的朋友可以來(lái)參考下2015-08-08
JS可以用來(lái)播放多種聲音文件,包括常見(jiàn)的mp3、wav等格式,這篇文章主要給大家介紹了關(guān)于JavaScript中播放音頻文件的幾種常用方法,需要的朋友可以參考下2023-10-10