备案控制台
开发者社区 开发与运维 文章 正文

js获取区域坐标

2017-11-08 1024
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

 

 

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

 

 
 

 
 

这样更简单（整个页面坐标）：
 

 
 

 

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

 

 
 


 


 


 


 

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


 


 


 



                        
                    

                    
                        

                            

    
文章标签：

    

        

            JavaScript
        

        

            前端开发
        

    



                            

    
关键词：

    

        

            JavaScript坐标
        

        

            JavaScript区域
        

    



                            
                        

                        
                        
                    
                

                


                

                    

                        

                            
                                
                            
                            

                        

                        技术小胖子
                        

                        

                    

                    

                        

                            

                            
目录

                        

                        

                    

                

                

                    

                


                

    
相关文章

    

        

            

                

                    程序员诗人
                    
                

                
                
                |
                

                    JavaScript
                    API
                

            

            

                

                    
                        JS如何模拟鼠标点击X,Y坐标
                    
                    

          
            现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?
document.body.onclick = function(){
 e = arguments[0];
 var dt = e.

                    

                        

                            

                                程序员诗人
                                
                            

                            2342
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    快乐阿超
                    
                

                |
                
5月前

                |
                

                    JavaScript
                

            

            

                

                    
                        js获取元素相对于document的坐标
                    
                    
js获取元素相对于document的坐标

                    

                        

                            

                                快乐阿超
                                
                            

                            29
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    游客ruqdfvh2iuyqc
                    
                

                
                
                |
                

                    JavaScript
                

            

            

                

                    
                        js获取屏幕上圆和椭圆的点坐标
                    
                    
js获取屏幕上圆和椭圆的点坐标

                    

                        

                            

                                游客ruqdfvh2iuyqc
                                
                            

                            209
                            0
                            
                        

                    

                

                
                    js获取屏幕上圆和椭圆的点坐标
                
            

        

        

            

                

                    前端要努力QAQ
                    
                

                
                
                |
                

                    JavaScript
                    索引
                    Python
                

            

            

                

                    
                        JS 刷 Leetcode：303. 区域和检索 - 数组不可变
                    
                    
JS 刷 Leetcode：303. 区域和检索 - 数组不可变

                    

                        

                            

                                前端要努力QAQ
                                
                            

                            77
                            0
                            
                        

                    

                

                
                    JS 刷 Leetcode：303. 区域和检索 - 数组不可变
                
            

        

        

            

                

                    猫先生c
                    
                

                
                
                |
                

                    JavaScript
                

            

            

                

                    
                        可视区域判断（js三种方式判断）
                    
                    
可视区域判断（js三种方式判断）

                    

                        

                            

                                猫先生c
                                
                            

                            117
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    欧阳呀
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离
                    
                    
笔记

                    

                        

                            

                                欧阳呀
                                
                            

                            126
                            0
                            
                        

                    

                

                
                    javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离
                
            

        

        

            

                

                    码农技术君
                    
                

                
                
                |
                

                    JavaScript
                

            

            

                

                    
                        js：事件对象中的7种坐标
                    
                    
js：事件对象中的7种坐标

                    

                        

                            

                                码农技术君
                                
                            

                            73
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    1474418023075726
                    
                

                
                
                |
                

                    JavaScript
                    前端开发
                

            

            

                

                    
                        js获取元素到文档区域document的(横向、纵向)坐标的两种方法
                    
                    
js获取元素到文档区域document的(横向、纵向)坐标的两种方法

                    

                        

                            

                                1474418023075726
                                
                            

                            193
                            0
                            
                        

                    

                

                
                    js获取元素到文档区域document的(横向、纵向)坐标的两种方法
                
            

        

        

            

                

                    张中华
                    
                

                
                
                |
                

                    前端开发
                    JavaScript
                

            

            

                

                    
                        《JS原理、方法与实践》- canvas作图（六）- 坐标操作
                    
                    
《JS原理、方法与实践》- canvas作图（六）- 坐标操作

                    

                        

                            

                                张中华
                                
                            

                            94
                            0
                            
                        

                    

                

                
            

        

        

            

                

                    张中华
                    
                

                
                
                |
                

                    前端开发
                    算法
                    JavaScript
                

            

            

                

                    
                        《JS原理、方法与实践》- canvas作图（二）- 组合、剪切、坐标检测
                    
                    
《JS原理、方法与实践》- canvas作图（二）- 组合、剪切、坐标检测

                    

                        

                            

                                张中华
                                
                            

                            156
                            0
                            
                        

                    

                

                
            

        

    



            

            

                
                
                    
                    

    

        

            
热门文章

        

        

            
最新文章

        

    

    

        

            

                
  • 
                    
                        
    
                            
    1
    
                            
                            
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    JavaScript 权威指南第七版（GPT 重译）（七）(1)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
    
                            
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    前端最常见的JS面试题大全
    
                            
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
        
    
            
    
                
  • 
                    
                        
    
                            
    1
    
                            
                            
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    
                            
    141
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    2
    
                            
                            
    Java Script 中的垃圾回收机制有哪些缺点
    
                            
    17
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
    3
    
                            
                            
    描述 JavaScript 中的垃圾回收机制。
    
                            
    21
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    4
    
                            
    如何使用 JavaScript 操作 DOM？
    
                            
    19
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    5
    
                            
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    
                            
    22
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    6
    
                            
    JavaScript 中的数组方法有哪些？
    
                            
    11
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    7
    
                            
    JS设置日期为0时0分0秒
    
                            
    36
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    8
    
                            
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    
                            
    27
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    9
    
                            
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    
                            
    22
    
                        
    
                        
                
    • 
                
  • 
                    
                        
    
                            
                            
    10
    
                            
    深入理解JavaScript中的闭包与作用域链
    
                            
    10
    
                        
    
                        
                
    • 
            
    
            
    
                
            
    
        
    
    
    

    
                    
                    
    
    
    
        
    相关课程
    
        更多
    
    
    
    
        
  • 
                JavaScript入门与实战
            
    • 
        
  • 
                JavaScript 自学手册文档教程
            
    • 
    
    

    
                    
    
    
    
        
    相关电子书
    
        更多
    
    
    
    
        
  • 
                JavaScript异步编程
            
    • 
        
  • 
                Delivering Javascript to World
            
    • 
        
  • 
                编程语言如何演化-以JS的private为例
            
    • 
    
    

    
                    
    
    
    
        
    相关实验场景
    
        更多
    
    
    
    
        
  • 
            Html5和Webpack2：Webpack5打包JS和样式表
        
    • 
    
    

    
                    
                    
                    
    
                        
    
    
    
        
    下一篇
    
    
    
    部署LAMP环境（Alibaba Cloud Linux 3）