JavaScript實現(xiàn)點擊自制菜單效果
本文實例為大家分享了JavaScript實現(xiàn)點擊自制菜單效果的具體代碼，供大家參考，具體內(nèi)容如下
應(yīng)用場景：當(dāng)我們希望用戶再點擊右鍵的時候不希望彈出瀏覽器的默認菜單時，需要阻止瀏覽器默認行為，并執(zhí)行我們想要的效果
第一種方式，通過創(chuàng)建元素的方式
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> body { height: 3000px; }.menu { width: 100px; height: 280px; background-color: red; position: absolute; left: 0; top: 0; display: none; } </style></head><body> <script> var Bon = true; var menu = null; document.oncontextmenu = function(event) { if (Bon) {menu = document.createElement('div');menu.classList.add('menu');document.body.appendChild(menu);menu.style.left = event.pageX + 'px';menu.style.top = event.pageY + 'px';menu.style.display = 'block';Bon = false;event.preventDefault(); } else {menu.style.left = event.pageX + 'px';menu.style.top = event.pageY + 'px';event.preventDefault(); } } document.onmousedown = function(e) { if (e.button == 0) {var menu = document.querySelector('.menu');document.body.removeChild(menu);Bon = true; } } </script></body></html>
第二種：通過隱藏元素的方式
<div class='menu'></div> <script> var menu = document.querySelector('.menu'); document.oncontextmenu = function(event) { menu.style.left = event.pageX + 'px'; menu.style.top = event.pageY + 'px'; menu.style.display = 'block'; event.preventDefault(); } document.onmousedown = function(e) { if (e.button == 0) {menu.style.display = 'none'; } }</script>
當(dāng)我們點擊右鍵時就不會彈出默認的菜單了，彈出了我設(shè)置的紅框框。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 實現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟2. vue項目中echarts自適應(yīng)問題的高級解決過程3. python b站視頻下載的五種版本4. python pytesseract庫的實例用法5. python3實現(xiàn)往mysql中插入datetime類型的數(shù)據(jù)6. IntelliJ IDEA設(shè)置條件斷點的方法步驟7. ASP點滴：ASP頁面內(nèi)VBScript和JScript的交互8. idea打開多個窗口的操作方法9. 解決AJAX返回狀態(tài)200沒有調(diào)用success的問題10. 刪除docker里建立容器的操作方法
網(wǎng)公網(wǎng)安備