当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript 自定义html元素鼠标右键菜单

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

2019年12月02日  | 移动技术网IT编程  | 我要评论

自定义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>

 

 

实现效果

 

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网