点击自制菜单

最新推荐文章于 2022-01-07 10:18:22 发布

~嘘~禁止想象~

最新推荐文章于 2022-01-07 10:18:22 发布

阅读量211

点赞数 2

分类专栏：前端 # JavaScript小练习

本文链接：https://blog.csdn.net/weixin_45773503/article/details/113425737

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果

第一种方式，通过创建元素的方式

<!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>

当我们点击右键时就不会弹出默认的菜单了，弹出了我设置的红框框。
在这里插入图片描述

~嘘~禁止想象~

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
点击自制菜单

应用场景：当我们希望用户再点击右键的时候不希望弹出浏览器的默认菜单时，需要阻止浏览器默认行为，并执行我们想要的效果第一种方式，通过创建元素的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
复制链接

扫一扫