2022-05-04 阻止鼠标右键的默认行为,并自定义右键菜单

前端OnTheRun

已于 2022-05-04 18:26:44 修改

阅读量738

点赞数

CC 4.0 BY-SA版权

分类专栏：项目与应用文章标签： html css DOM 浏览器的默认行为

于 2022-05-04 09:00:47 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/124565577

项目与应用专栏收录该内容

79 篇文章

订阅专栏

本文介绍了如何阻止HTML页面的鼠标右键默认弹出菜单，通过使用preventDefault()函数实现自定义的右键菜单样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:阻止HTML文件鼠标右键的默认弹出,替换成自定义样式

要点:使用preventDefault()函数

实现:

<style>
    ul {
        /* 不能忘,否则动不起来 */
        position: absolute;
        background: #ccc;
        width: 100px;
        height: 300px;
        /*默认不显示*/
        display: none;
    }
</style>

<body>
    <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</body>
<script>
    // 1.获取节点
    var ul = document.getElementsByTagName("ul")[0];
    // 2.给文件绑定鼠标右键事件
    document.oncontextmenu = function(eve) {
        // 3.显示ul,设置坐标
        ul.style.display = 'block';
        ul.style.left = eve.clientX + 'px';
        ul.style.top = eve.clientY + 'px';
        // 4.阻止默认行为
        eve.preventDefault();
    }
</script>