前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在鼠标点击的位置 ,添加一个div ,类似手表右键菜单

在鼠标点击的位置 ,添加一个div ,类似手表右键菜单

原创
作者头像
用户7705674
修改2021-09-24 10:31:03
1.5K0
修改2021-09-24 10:31:03
举报
文章被收录于专栏:css小迷妹
代码语言:javascript
复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> New Document </title>
    <script src="styles/default/js/jquery-2.1.0.min.js"></script>
</head>
<style type="text/css">
    .modle {
        width: 100px;
        cursor: pointer;
        text-align: center;
    }
    #popmenu {
        display: none;
        position: absolute;
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-left: 10px;
        border: 1px solid black;
        background-color: white
    }
</style>

<body>
    <div class="modle">
        click me
    </div>
    <div id="popmenu">
        内容
    </div>
</body>
<script type="text/javascript">
    var menu = document.getElementById("popmenu");
    $(".modle").click(function(event) {
        e = event ? event : window.event;
        t = e.target || e.srcElement;
        menu.style.left = getPointerX(e) + "px";
        menu.style.top = getPointerY(e) + "px";
        menu.style.display = "block";
    });

    function getPointerX(event) {
        return event.pageX || (event.clientX + (document.documentElement.scrollLeft                                 || document.body.scrollLeft));
    }

    function getPointerY(event) {
        return event.pageY || (event.clientY + (document.documentElement.scrollTop
                || document.body.scrollTop));
    }
</script>


</html></pre> 

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档