Event事件学习实用路线（8）——Event事件之事件鼠标右键——案例：实现自定义一个右键菜单_document.addeventlistener('contextmenu-CSDN博客

本文链接：https://blog.csdn.net/u013946061/article/details/105755081

Event事件之事件鼠标右键——案例：实现自定义一个右键菜单

鼠标右键

鼠标右键

contextmenu 鼠标右键事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    document.addEventListener('contextmenu', function(){
        alert("鼠标右键事件");
    });
</script>
</body>
</html>

在浏览器上鼠标右键，先显示"鼠标右键事件"对话框，后显示默认鼠标右键菜单。
在这里插入图片描述

案例：实现自定义一个右键菜单

注意：需要阻止默认行为，否则会弹出浏览器默认右键菜单！

<!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>
        /* 情况默认样式 */
       *{
           margin: 0;
           padding: 0;
           list-style: none;
       }
       ul{
           width: 200px;
           border: 1px solid #000;
           position: absolute;
           top: 0;
           left: 0;
           display: none;
       }
       li{
           padding: 10px;
           border: 1px solid #333;
       }
    </style>
</head>
<body style="height: 3000px;">
    <ul>
        <li>刷新</li>
        <li>跳转</li>
        <li>加载</li>
        <li>首页</li>
    </ul>
<script>
{
    var ul = document.querySelector('ul');

    document.addEventListener("contextmenu", (e)=>{
        ul.style.display = 'block';
        let x = e.pageX;
        let y = e.pageY;
        ul.style.left = x + 'px';
        ul.style.top = y + 'px';

        e.preventDefault();
    });
}
</script>
</body>
</html>

在这里插入图片描述

另外一种阻止默认行为的方式

        var ul=document.querySelector('ul');

        // 自定义一个右键菜单
        // contextmenu 鼠标右键事件
        document.addEventListener('contextmenu',function(e){
            // 显示列表
            ul.style.display='block';
            // 鼠标位置
            var x=e.pageX;
            var y=e.pageY;
            ul.style.left=x+'px';
            ul.style.top=y+'px';

            // e.preventDefault()

            return false;
        })

我们发现其实并没有阻止默认行为。
在这里插入图片描述

那么我们试试在默认的事件中写：

{
    var ul = document.querySelector('ul');
    
    document.oncontextmenu = (e)=>{
        ul.style.display = 'block';
        let x = e.pageX;
        let y = e.pageY;
        ul.style.left = x + 'px';
        ul.style.top = y + 'px';

        return false;
    };
}