右键点击事件

最新推荐文章于 2024-04-19 17:29:39 发布

Guo小阳*

最新推荐文章于 2024-04-19 17:29:39 发布

阅读量583

点赞数

本文链接：https://blog.csdn.net/weixin_41602101/article/details/89521279

版权

html+css


<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>右键点击事件</title>
</head>
<style type="text/css">
    *{margin:0;
       padding:0;list-style: none;}
      #items{
        width:100px;
        height:200px;
        border:1px solid red;
        display:none;
        position: absolute;
      }
      .item{
        height:40px;
        line-height: 40px;
      }

</style>
<body>
    <ul id="items">
        <li class="item">返回</li>
        <li class="item">加载</li>
        <li class="item">另寻为</li>
        <li class="item">打印</li>
        <li class="item">查看源代码</li>
    </ul>
</body>
</html>

源生

<script type="text/javascript">
    document.oncontextmenu =function(event){//oncontextmenu 右键点击事件
            var e =event||window.event;   //获取事件
            var items = document.getElementById("items")
            items.style.display="block";
            items.style.left=e.clientX+"px";
            items.style.top=e.clientY+"px";
            return false;
    }
    document.onclick =function(){
         items.style.display="none"
    }
</script>

jQuery

<script type="text/javascript">
    $(function(){
      $(document).contextmenu(function(event){
        var e =event||window.event;
        var x=e.clientX;
        var y =e.clientY;
        $("#items").css({"display":"block","left":x+'px',"top":y+'px'})
        return false;
      })
      $(document).click(function() {
        $("#items").css({display:"none"})
      });
    })
</script>

Guo小阳*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
右键点击事件

html+css<html lang="en"><head> <meta charset="UTF-8" /> <title>右键点击事件</title></head><style type="text/css"> *{margin:0; padding:0;list...
复制链接

扫一扫