javascript鼠标右击事件

愚舜

于 2019-06-09 11:41:02 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js鼠标右键点击事件

本文链接：https://blog.youkuaiyun.com/first_shun/article/details/91351640

javascript 专栏收录该内容

47 篇文章

订阅专栏

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

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

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>