javascript鼠标右击事件

最新推荐文章于 2025-09-16 16:53:54 发布

原创最新推荐文章于 2025-09-16 16:53:54 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js鼠标右键点击事件

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍如何在HTML中禁用浏览器默认的右键菜单，并通过监听mouseup事件实现自定义的鼠标右键功能。代码示例展示了如何在div元素上阻止默认的contextmenu事件，并检查鼠标按钮来识别右键点击。

1、屏蔽浏览器自带的默认弹出上下文菜单的contextmenu事件。

2、使用mouseup或者mousedown事件监控鼠标的右键，就可以形成鼠标右击的事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>鼠标右键单击事件</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .model{
                width: 100px;
                height: 100px;
                background: #f00;
                display: none;
            }
        </style>
    </head>
    <body>
       <div id='btn1'>
           <span>右键</span>
           <div class="model">弹出框</div>
       </div>
       <script type="text/javascript">
       //阻止元素上本身的右键contextmenu事件
        document.getElementById('btn1').oncontextmenu=function(){return false}
        document.getElementById('btn1').onmouseup=function(e){
            if(e.button === 2){
                console.log("右键点击"); 
            }
        }
       </script>
    </body>
</html>