最简单的html自定义右键

最新推荐文章于 2024-04-18 15:56:43 发布

IInit

最新推荐文章于 2024-04-18 15:56:43 发布

阅读量518

点赞数

分类专栏： Html练习文章标签： css html

本文链接：https://blog.csdn.net/qq_33768121/article/details/90487605

版权

Html练习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最后结果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        div{
            height:100%;width:100%;
            position:fixed;
        }
        #menu-div {
            width: 140px;
            height: 200px;
            background-color: #DEDEDE;
            display: none;
            position: fixed;
        }
        li {
            margin-left: -10px;
            line-height: 35px;
        }

    </style>
    <script>
        window.document.oncontextmenu = function(){

            return false;
        }
    </script>
    <script>
        function popMenu(event) {
            var mymenu = document.getElementById('menu-div');
            mymenu.style.left = event.clientX + "px";   // 获取鼠标位置
            mymenu.style.top = event.clientY + "px";
            mymenu.style.display='block';
            return false;   // 该行代码确保系统自带的右键菜单不会被调出
        }
        function hideMenu() {
            document.getElementById('menu-div').style.display='none';
        }
        document.addEventListener("click", function(event){
            var mymenu = document.getElementById('menu-div');
            mymenu.style.display = "none";
        });
    </script>
</head>
<body>
<div oncontextmenu="return popMenu(event);">
<a href="http://baidu.com/" >百度</a>
</div>
<div id="menu-div">
    <ul>
        <li>这是菜单项一</li>
        <li>这是菜单项二</li>
        <li>这是菜单项三</li>
        <li>这是菜单项四</li>
        <li>这是菜单项五</li>
    </ul>
</div>
</body>
</html>

IInit

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
最简单的html自定义右键

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>鼠标事件</title> <style> div{ height:100%;width:100%; ...
复制链接

扫一扫