JavaScript 自定义html元素鼠标右键菜单

自定义html元素鼠标右键菜单

 

 

实现思路

在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值

 

编码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

    window.onload = function(){

 

    var menu = document.getElementById('menu');

    document.body.oncontextmenu = function(e){ // 自定义body元素的鼠标事件处理函数

        var e = e || window.event;

        e.preventDefault();  //阻止系统右键菜单 IE8-不支持

       

        // 显示自定义的菜单调整位置

        let scrollTop =

                document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置

        let scrollLeft =

                document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置

 

        menu.style.display = 'block';

        menu.style.left = e.clientX + scrollLeft + 'px';

        menu.style.top = e.clientY  + scrollTop + 'px';

    }

       

    // 鼠标点击其他位置时隐藏菜单

    document.onclick = function(){

        menu.style.display = 'none';

    }

}

 

</script>

<style>

    *{

        margin: 0;

        padding: 0;

    }

   

    p{

        margin-top: 200px; 

    }

   

    ul li{

        list-style-type: none;

        margin: 10px 0;

        text-align: center;

    }

   

    #menu{

        border:1px solid #ccc;

        background: #eee;

    position: absolute; // 设置菜单为绝对位置

        width: 100px;

        height: 120px;

        display: none;

    }

</style>

</head>

<body style="overflow:auto">

    <div id="box" style="height:5000px; width:5000px">让body元素出现滚动条用的div</div>

    <div id="menu">

        <ul>

            <li><a href="#">分享</a></li>

            <li><a href="#">收藏</a></li>

            <li><a href="#">举报</a></li>

        </ul>

    </div>

</body>

</html>

 

 

实现效果

 

 

 

posted @ 2019-12-02 12:30  授客  阅读(3312)  评论(0)  编辑  收藏  举报