专栏首页编程微刊clientX和clientY 事件属性的使用

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 条评论
登录 后参与评论

相关文章

  • VMware-workstation安装

    王小婷
  • SourceTree安装(小白特别详细教程)

    首先,下载SourceTree,谷歌搜索SourceTree,第一第二个就是下载网址。

    王小婷
  • Uncaught (in promise) DOMException

    这是一个困扰我许久的bug,debugger的时候没有找到错误的地方,然后今天早晨进公司,换了代码的加载位置和顺序,终于在浏览器里面找到了报错。

    王小婷
  • python爬虫学习:可视化监控你的爬虫

    相信大家在跑爬虫的过程中,也会好奇自己养的爬虫一分钟可以爬多少页面,多大的数据量,当然查询的方式多种多样。今天我来讲一种可视化的方法。

    python学习教程
  • cdr怎么设计眩晕底纹? cdr复古背景图的设计方法

    cdr中设计背景图很简单,想要制作一个眩晕底纹的背景图,该怎么设计这个背景呢?下面我们就来看看详细的教程。

    砸漏
  • pogoplug openwrt 安装 百度网盘python客户端 bypy

    用户1130771
  • python socket 网络编程s

    class Server(object): def init(self,sel,sock): self.sel = sel self.sock = sock

    py3study
  • 8个视觉稿设计工具,页面视觉和实时交互就靠它们

    对于视觉设计师、交互设计师来说,他们需要做的不仅仅是设计一张张静态的页面和独立的icon,他们需要将这些元素整体组合在一起,根据整体画面感和视觉体验来做出修改。...

    前朝楚水
  • SecureCRT设置背景颜色

    打开SecureCRT的会话,右键点击选项卡,在弹出的菜单里选择“Session Options”

    似水的流年
  • 2020程序员技能展望:平均年薪5.4万美元,雇主最看重的语言Python名列第二

    为了了解 2020 年市场对开发人员技能需求的状况,世界知名招聘平台 HackerRank 对来自 162 个国家/地区的 116,000 多名开发人员和招聘经...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券