clientX和clientY 事件属性的使用

需求:

做项目中遇到一个这样的需求,点击属性菜单节点,出现显示框,显示框的位置随着鼠标点击的位置距离而改变。

教程:

clientX 事件属性 http://www.runoob.com/jsref/event-clientx.html

clientY 事件属性 http://www.runoob.com/jsref/event-clienty.html

基本定义

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。客户区指的是当前窗口。

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(客户区)的垂直坐标。 客户区指的是当前窗口。

图片.png

遇到的坑

这个功能在一些浏览器里面的兼容性和适配性的介绍

jQuery右键点击弹出菜单,菜单随鼠标点击的位置的变化而变化

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <div class="dropdown open" id="treeContextMenu" style="display: none;position: absolute">
            <ul class="dropdown-menu">
                <li>
                    <a href="javascript:;" id="toUpdateBtn">编辑</a>
                </li>
                <li>
                    <a href="javascript:;" id="deleteBtn">删除</a>
                </li>
            </ul>
        </div>
    </body>
    <script>
        //屏蔽浏览器右键菜单
        document.oncontextmenu = function() {
            return false;
        }
        //按下鼠标
        $(document).mousedown(function(e) {
            var key = e.which;
            //获取鼠标键位
            if(key == 3)
            //(1:代表左键; 2:代表中键; 3:代表右键)  

            {
                //获取右键点击坐标
                var x = e.clientX;
                var y = e.clientY;
                $("#treeContextMenu").show().css({
                    left: x,
                    top: y
                });
            }
        });
        //点击任意部位隐藏
        $(document).click(function() {
            $("#treeContextMenu").hide();

        })
    </script>

</html>
 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏marsggbo

li浮动时ul高度为0,解决ul自适应高度的几种方法

内容提要:   li浮动时ul高度为0,解决ul自适应高度的几种方法 在网页设计中,常常需要对li标签做浮动效果,但是在不同浏览器中会遇到兼容性问题,比如IE中...

25370
来自专栏韦弦的偶尔分享

微信小程序button组件样式

需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

4.6K40
来自专栏姬小光

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

15930
来自专栏微信小程序开发

小程序中图片高度等比缩放

前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩...

623100
来自专栏AhDung

【手记】理想的网页列表效果

单纯用ul/ol的list-style-position是搞不掂的,inside是可以让整个列表区块与段落对齐,但会失去项间悬挂对齐效果;outside倒是悬挂...

14520
来自专栏vue学习

微信小程序日常踩坑后的总结(猜测你也会遇到,持续更新。。。)

(1)图片需是本地图片或者是路径为https的网络图片; (2)使用网络图片要用wx.downloadFile( )下载,否则真机上无法显示图片; (3)w...

21220
来自专栏Youngxj

CSS3随机背景图片切换特效

88860
来自专栏河湾欢儿的专栏

2.布局解决方案- 水平布局<1>

水平布局 写出两个盒子并满足以下条件条件: 1.里面的宽度盒子不固定 2.外面盒子的宽度不固定

11230
来自专栏Huramkin的归档库

VSCode的快捷键

|快捷键|作用| |Alt + Click| 插入光标-支持多个| |Ctrl + Alt + up/down |上下插入光标-支持多个| |Ctr...

2K10
来自专栏python3

tkinter -- Canvas(3)

scale 缩放 item,计算公式:(coords - offset)*scale + offset

9320

扫码关注云+社区

领取腾讯云代金券