JavaScript实现点击自制菜单效果
本文实例为大家分享了JavaScript实现点击自制菜单效果的具体代码，供大家参考，具体内容如下
应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果
第一种方式，通过创建元素的方式
<!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>
当我们点击右键时就不会弹出默认的菜单了，弹出了我设置的红框框。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备