当前位置： 首页 > news >正文

js获取区域坐标

news 来源：原创 2024/5/9 20:50:50

 

 
 
  1. <html> 
  2. <head> 
  3. <script type="text/javascript">  
  4.     function getCoordinates(e){ 
  5.     x=e.clientX; 
  6.     y=e.clientY; 
  7.     document.getElementById("xycoordinates").innerHTML="当前坐标为: (X轴：" + x + ",Y轴：" + y + ")"; 
  8.     } 
  9.       
  10.     function clearCoordinates(){ 
  11.     document.getElementById("xycoordinates").innerHTML=""; 
  12.     } 
  13. </script> 
  14. </head> 
  15.  
  16. <body> 
  17. <div style="width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="getCoordinates(event)" onmouseout="clearCoordinates()"></div> 
  18. <div id="xycoordinates"></div> 
  19. </body> 
  20. </html> 

 
 
 
 
 
 
 
这样更简单（整个页面坐标）：
 
 
 
 
 
 
 
  1. <html> 
  2. <head> 
  3. <script type="text/javascript">  
  4.     function getCoordinates(e){ 
  5.         x=e.clientX; 
  6.         y=e.clientY; 
  7.         document.getElementById("xycoordinates").innerHTML="当前坐标为: (X轴：" + x + ",Y轴：" + y + ")"; 
  8.     } 
  9. </script> 
  10. </head> 
  11.  
  12. <body onmousemove="getCoordinates(event)"> 
  13.     <div id="xycoordinates"></div> 
  14. </body> 
  15. </html> 

 
 
 
 

 
 

 
 

 
 

 
 
      本文转自许琴 51CTO博客，原文链接：http://blog.51cto.com/xuqin/959082，如需转载请自行联系原作者
 
 

  

 
 
 

 
 

 


                

        

        




    


                
                

                  

                    
                      
                  



                

                

                  
相关文章：

  
                    
                      
  • 
                        海洋祝福电子贺卡
                      
    • 
                    
                      
  • 
                        虚拟局域网（VLAN）和以太网通道
                      
    • 
                    
                      
  • 
                        WAS 常用命令
                      
    • 
                    
                      
  • 
                        SQL Server In-Memory OLTP Internals for SQL Server 2016
                      
    • 
                    
                      
  • 
                        酣畅淋漓.....
                      
    • 
                    
                      
  • 
                        Eclipse 调优及使用小细节
                      
    • 
                    
                      
  • 
                        Linux周期性任务计划
                      
    • 
                    
                      
  • 
                        我在Dell笔记本上安装Windows 7全过程
                      
    • 
                    
                      
  • 
                        设计模式.迪米特法则
                      
    • 
                    
                      
  • 
                        【图像处理】基于OpenCV底层实现的直方图匹配
                      
    • 
                    
                      
  • 
                        javascript判断IPV6格式
                      
    • 
                    
                      
  • 
                        【sql】部门最高工资 Department Highest Salary
                      
    • 
                    
                      
  • 
                        用shell批量修改类似的文件名
                      
    • 
                    
                      
  • 
                        【★】交换层网关协议大总结！
                      
    • 
                    
                      
  • 
                        使用vRealize Operations for Horizon，做高效的虚拟桌面系统管理员
                      
    • 
                    
                      
  • 
                        (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
                      
    • 
                    
                      
  • 
                        android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
                      
    • 
                    
                      
  • 
                        css系列之关于字体的事
                      
    • 
                    
                      
  • 
                        Eureka 2.0 开源流产，真的对你影响很大吗？
                      
    • 
                    
                      
  • 
                        JAVA_NIO系列——Channel和Buffer详解
                      
    • 
                    
                      
  • 
                        Java深入 - 深入理解Java集合
                      
    • 
                    
                      
  • 
                        JS函数式编程 数组部分风格 ES6版
                      
    • 
                    
                      
  • 
                        Laravel Telescope：优雅的应用调试工具
                      
    • 
                    
                      
  • 
                        react-native  安卓真机环境搭建
                      
    • 
                    
                      
  • 
                        yii2权限控制rbac之rule详细讲解
                      
    • 
                    
                      
  • 
                        从地狱到天堂，Node 回调向 async/await 转变
                      
    • 
                    
                      
  • 
                        如何设计一个比特币钱包服务
                      
    • 
                    
                      
  • 
                        如何实现 font-size 的响应式
                      
    • 
                    
                      
  • 
                        ​第20课 在Android Native开发中加入新的C++类
                      
    • 
                    
                      
  • 
                        # Maven错误Error executing Maven
                      
    • 
                    
                      
  • 
                        #git 撤消对文件的更改
                      
    • 
                    
                      
  • 
                        #pragma预处理命令
                      
    • 
                    
                      
  • 
                        #在 README.md 中生成项目目录结构
                      
    • 
                    
                      
  • 
                        （￥1011）－（一千零一拾一元整）输出
                      
    • 
                    
                      
  • 
                        （13）：Silverlight 2 数据与通信之WebRequest
                      
    • 
                    
                      
  • 
                        （C#）if (this == null)？你在逗我，this 怎么可能为 null！用 IL 编译和反编译看穿一切
                      
    • 
                    
                      
  • 
                        (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)（二）嵌入菜单和执行命令...
                      
    • 
                    
                      
  • 
                        (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
                      
    • 
                    
                      
  • 
                        （C语言）fread与fwrite详解
                      
    • 
                    
                      
  • 
                        (MIT博士）林达华老师－概率模型与计算机视觉”
                      
    • 
                    
                      
  • 
                        （二）pulsar安装在独立的docker中，python测试
                      
    • 
                    
                      
  • 
                        （附源码）spring boot校园拼车微信小程序 毕业设计 091617
                      
    • 
                    
                      
  • 
                        （附源码）ssm基于微信小程序的疫苗管理系统 毕业设计 092354
                      
    • 
                    
                      
  • 
                        （十一）c52学习之旅-动态数码管
                      
    • 
                    
                      
  • 
                        (原創) X61用戶，小心你的上蓋!! (NB) (ThinkPad) (X61)
                      
    • 
                    
                      
  • 
                        （转载）Linux网络编程入门
                      
    • 
                    
                      
  • 
                        .bat批处理（一）：@echo off
                      
    • 
                    
                      
  • 
                        .NET 依赖注入和配置系统
                      
    • 
                    
                      
  • 
                        .net 中viewstate的原理和使用
                      
    • 
                    
                      
  • 
                        @GetMapping和@RequestMapping的区别
                      
    • 
                    
                      
  • 
                        @RequestBody的使用
                      
    • 
                    
                      
  • 
                        [ C++ ] STL---仿函数与priority_queue
                      
    • 
                    
                      
  • 
                        [AHOI2009]中国象棋    DP，递推，组合数
                      
    • 
                    
                      
  • 
                        [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作
                      
    • 
                    
                      
  • 
                        [Ariticle] 厚黑之道 一 小狐狸听故事
                      
    •