码迷,mamicode.com
首页 > Web开发 > 详细

Html鼠标右键菜单代码

时间:2017-10-14 17:05:29      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:super   事件   显示   fixed   默认   char   top   val   osi   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html菜单显示界面</title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #btn{
            width: 60px;
            height: 30px;
            background-color: #01AAED;
            color: white;
            display:none;
            position: fixed;
            left: 0%;
            top: 0%;
        }

        #btn:hover{
            background-color: white;
            color: black;
        }
    </style>
</head>
<body>

<input type="button" value="删除" id="btn">
<div style="text-align: center">
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  id="img">
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
    $(function(){
        //此处是针对图片,如果这个元素上鼠标右键,将浏览器默认右键事件给拦截了
        $("#img").bind("contextmenu",function(e){
            return false;
        });
  1. //之前在网上看过很多代码,但是有一个bug,算不少bug,但是我要在这里说一下。鼠标右键点击事件鼠标松开之后 执行的  ,因为个人的操作习惯,当右键点起的时候  在  
  2. 按钮的0*0位置也执行了右键  ,所以说  上边屏蔽了为什么还显示默认浏览器菜单,那么  我们只需要把显示的元素鼠标右键给屏蔽掉就不会了,欢迎大家转载本代码,谢谢大家!  
        $("#btn").bind("contextmenu", function () {
            return false;
        })
        $("#img").mousedown(function (e) {
            if (e.which == 3)
            {
                //获取鼠标的x轴
                var x = e.pageX;
                //获取鼠标的Y轴
                var y = e.pageY;
                //对我们设定的菜单元素位置移动到当前鼠标右键点击的位置,并且显示出来
                $("#btn").css({ ‘top‘: y + ‘px‘, ‘left‘: x + ‘px‘, ‘display‘: ‘block‘, ‘position‘: ‘absolute‘ });
            }

        })

    })
</script>
</body>
</html>

  技术分享

 

Html鼠标右键菜单代码

标签:super   事件   显示   fixed   默认   char   top   val   osi   

原文地址:http://www.cnblogs.com/cnhonker/p/7667430.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!