js實現(xiàn)右鍵自定義菜單
更新時間:2016年12月03日 10:31:16 作者:代碼小公主
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)右鍵菜單功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了右鍵自定義菜單的具體代碼,供大家參考,具體內(nèi)容如下
<!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>復(fù)制</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"; //讓自定義菜單隨鼠標(biāo)的箭頭位置移動 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問題
下面小編就為大家?guī)硪黄仙U凧avaScript面向?qū)ο蠡A(chǔ)與this指向問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10javascript下function聲明一些小結(jié)
function聲明一些東西,我們都知道function和var一樣是預(yù)處理的在js里面,但是到底什么是函數(shù)聲明呢,我們來看幾個例子2007-12-12使用 bootstrap modal遇到的問題小結(jié)
bootstrap提供了一個寫好的css文件和js文件然而在使用時遇到了一下并不是很好的問題,今天在使用彈出對話框時遇到了一個這樣的問題,今天小編給大家分享下使用 bootstrap modal遇到的問題小結(jié),一起看看吧2016-11-11使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細介紹了使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
D3是一個基于數(shù)據(jù)操作的可視化js庫,認識d3,就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下2014-10-10深入理解setTimeout函數(shù)和setInterval函數(shù)
下面小編就為大家?guī)硪黄钊肜斫鈙etTimeout函數(shù)和setInterval函數(shù)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05