clientX和clientY 事件属性的使用

需求：

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

教程：

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

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

基本定义

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

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

遇到的坑

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

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>

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

clientX和clientY 事件属性的使用

教程：

猜你喜欢