js實現(xiàn)右鍵自定義菜單
更新時間：2016年12月03日 10:31:16 作者：代碼小公主
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)右鍵菜單功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了右鍵自定義菜單的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#menu {
height: 200px;
width: 50px;
border: 1px solid gray;
background-color: antiquewhite;
padding: 10px;
display: none;
position: absolute;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 40px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>復制</li>
<li>粘貼</li>
<li>運行</li>
<li>工具</li>
<li>幫助</li>
</ul>
</div>
</body>
<script type="text/javascript">
var menu = document.getElementById("menu");
document.oncontextmenu = function(ev) {
var oEvent = ev || event;
//自定義的菜單顯示
menu.style.display = "block";
//讓自定義菜單隨鼠標的箭頭位置移動
menu.style.left = oEvent.clientX + "px";
menu.style.top = oEvent.clientY + "px";
//return false阻止系統(tǒng)自帶的菜單，
//return false必須寫在最后，否則自定義的右鍵菜單也不會出現(xiàn)
return false;
}
//實現(xiàn)點擊document，自定義菜單消失
document.onclick = function() {
menu.style.display = "none";
}
</script>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript面向對象基礎與this指向問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章介紹了Echarts.js實現(xiàn)水滴球和海洋效果的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
function聲明一些東西,我們都知道function和var一樣是預處理的在js里面,但是到底什么是函數(shù)聲明呢,我們來看幾個例子2007-12-12
bootstrap提供了一個寫好的css文件和js文件然而在使用時遇到了一下并不是很好的問題，今天在使用彈出對話框時遇到了一個這樣的問題，今天小編給大家分享下使用 bootstrap modal遇到的問題小結，一起看看吧2016-11-11
使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細介紹了使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據)
D3是一個基于數(shù)據操作的可視化js庫，認識d3，就從最基礎的顯示可加載數(shù)據談起,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了javascript實現(xiàn)全局匹配并替換的方法的總結，十分的簡單實用，有需要的小伙伴可以參考下。2015-04-04
深入理解setTimeout函數(shù)和setInterval函數(shù)
下面小編就為大家?guī)硪黄钊肜斫鈙etTimeout函數(shù)和setInterval函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調函數(shù)和事件——更合理和更強大。簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息2023-04-04
這篇文章主要介紹Ionic如何創(chuàng)建APP項目的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06