本文实例为大家分享了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>
当我们点击右键时就不会弹出默认的菜单了,弹出了我设置的红框框。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- js 下拉菜单点击旁边收起实现(踩坑记)
- js实现二级菜单点击显示当前内容效果
- JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
- 简单实现js点击展开二级菜单功能
- js实现鼠标点击左上角滑动菜单效果代码
- js实现点击向下展开的下拉菜单效果代码
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- js菜单点击显示或隐藏效果的简单实例
- Js点击弹出下拉菜单效果实例
- 下拉菜单点击实现连接跳转功能的js代码
本文由 华域联盟 原创撰写:华域联盟 » JavaScript实现点击自制菜单效果
转载请保留出处和原文链接:https://www.cnhackhy.com/49929.htm