js获取鼠标在页面中的坐标问题

最新推荐文章于 2024-01-28 13:11:02 发布
原创 最新推荐文章于 2024-01-28 13:11:02 发布 · 1.7k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
Javascript

当前文章被收录于：

Javascript
18 篇文章 0 人学习
订阅专栏 查看详情 
<!DOCUMENT HTML>
<html>
	<head>
		<meta http-equiv="content-type" charset="gb1312"></meta>	
		<script type="text/javascript">
				function test(e){
					var e = e || event;
					var clientX = e.clientX;
					var clientY = e.clientY;
					alert('client position is (' + clientX + ',' + clientY + ')');
					var screenX = e.screenX;
					var screenY = e.screenY;
					alert('screen position is (' + screenX + ',' + screenY + ')');
				}
		</script>
	</head>	
	<body onmousedown="test(event);">
		
	</body>
</html>

event.clientX:鼠标距离浏览器左侧页面的距离 


event.clientY:鼠标距离浏览器上部页面的距离，不算书签、收藏夹等内容，是距离纯页面的大小
event.screenX:事件属性可返回事件发生时鼠标指针相对于  屏幕  的水平坐标
event.screenY:事件属性可返回事件发生时鼠标指针相对于  屏幕  的垂直坐标


                

        

    






  




    



                



	

		

			

				
					
获取鼠标在页面上的位置（包括滚动条）

				
			

			

				

					04-06
				

			

		

		

			
				
主要获取鼠标在页面上的位置，包括当页面有滚动条的时候。。

			
		

	



                

            
              



	

		

			

				
					
自动获取鼠标当前所在位置屏幕的坐标

				
			

			

				

					08-11
				

			

		

		

			
				
用C++编写的一个简单的小工具，用来自动获取鼠标当前所在位置屏幕的坐标

			
		

	



              


  
              

                


	

		

			

				
					
JS获取鼠标在元素内的相对坐标

				
			

			

				

					海天鹰
				

				

					01-28
					
					474
					
				

			

		

		

			
				
【代码】JS获取鼠标在元素内的相对坐标。

			
		

	





	

		

			

				
					
js 获取鼠标位置

				
			

			

				

					huolan__34的博客
				

				

					12-27
					
					2600
					
				

			

		

		

			
				
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。


属性及其兼容性
	属性
			说明
			兼容性
		clientX
			以浏览器窗口左上顶角为原点，定位 x 轴坐标
		...

			
		

	



		

			
		



	

		

			

				
					
获取鼠标点击位置的坐标

				
			

			

				

					weixin_52212950的博客
				

				

					03-03
					
					9985
					
				

			

		

		

			
				
获取点击的坐标有三种情况

获取在可视区域的坐标
	获取在文档页面的坐标
	获取在电脑屏幕的坐标
一：获取在可视区域的坐标

e.clientX : 获取距离页面左边的距离

e.clientY ：距离页面可视区域上边框的距离

获取在可视区的坐标，可视区就是我们屏幕可以看得到的区域例如在下方的截图中，红框圈住的区域就是可视区域，不管页面有多长，展示出来的可以看得见的这一部分就叫做可视区域






 document.addEventListener('click',function(e){
    .

			
		

	





	

		

			

				
					
获得鼠标在页面中的坐标

				
			

			

				

					lxllxl211的博客
				

				

					11-11
					
					1337
					
				

			

		

		

			
				
鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。event对象代表事件的状态，跟事件相关的一些列信息的集合。运行结果：点击浏览器可视区任意位置。

			
		

	





	

		

			

				
					
27报网MM爬虫福利一

					
热门推荐

				
			

			

				

					b15365637的博客
				

				

					11-28
					
					6万+
					
				

			

		

		

			
				
27报 http://www.126z.net/z/2019/11/28/41365.html

刚学爬虫花了4个小时写的，每一步备注的都很清楚，喜欢的朋友自己可以研究研究......



目标网站：http://www.126z.net



环境：Python3.x



相关第三方模块：requests、lxml



Re：各位在测试时只需要打开终端，使用 python xxx....

			
		

	





	

		

			

				
					
获取鼠标在页面上的坐标（clientxy，pagexy, offsetxy，screenxy）

				
			

			

				

					curacaolb的博客
				

				

					08-24
					
					2537
					
				

			

		

		

			
				
近期在做mouse position的issue，发现自己有些BOM的API非常的不熟练甚至遗忘，因此结合之前所以学和参考其他博文和文章总结一下一些获取鼠标在浏览器上的坐标的方法。
直接上代码
CSS：
div {
    position: absolute;
    left: 200px;
    top: 50px;
    width: 300px;
    height: 250px;
    background-color: blue;
    border: 50px solid red;

			
		

	





	

		

			

				
					
JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

				
			

			

				

					
				

				

					01-10
					
					817
					
				

			

		

		

			
				
分析：

外层边框是浏览器边框，内部盒子是页面的一个盒子，绿点是盒子中鼠标的位置。鼠标相对盒子边框的坐标=页面中（注意不是浏览器）鼠标坐标-盒子相对于浏览器边框的偏移量


第一步：求浏览器边框位置
x=element.offsetLeft;
y=element.offsetTop;
代码如下：

 1 /*************样式表*************...

			
		

	





	

		

			

				
					
JavaScript 获取鼠标点击位置坐标

				
			

			

				

					凯悦LOVE亚宁
				

				

					07-15
					
					462
					
				

			

		

		

			
				
鼠标点击位置坐标
相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件($("").click(function(){....}))后，事件screenX，screenY获取的是点击位置相对于屏幕的左边距与上边距，不考虑iframe因素，不同浏览器下表现的还算一致。

function getMousePos(event) {
            var e =

			
		

	





	

		

			

				
					
【javascript】js实现获取鼠标在盒子内的坐标

				
			

			

				

					weixin_43559672的博客
				

				

					09-10
					
					514
					
				

			

		

		

			
				
实现功能：点击页面中的盒子，显示鼠标点击点在盒子内的坐标。

			
		

	





	

		

			

				
					
电脑报2018年第27期

				
			

			

				

					07-11
				

			

		

		

			
				
目前最新电脑报2018年第27期，报纸日期2018年7月9日。

			
		

	





	

		

			

				
					
javascript获取鼠标当前位置坐标并显示

				
			

			

				

					06-12
				

			

		

		

			
				
javascript获取鼠标当前位置坐标，并显示出来

			
		

	





	

		

			

				
					
php 获取鼠标的坐标,基于JavaScript实现 获取鼠标点击位置坐标的方法_基础知识...

				
			

			

				

					weixin_36122351的博客
				

				

					03-22
					
					160
					
				

			

		

		

			
				
在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容鼠标点击位置坐标相对于屏幕如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠标点击事件后，事件screenX，screenY获取的是点击位置...

			
		

	





	

		

			

				
					
前端js给pdf文件添加印章，前端使用PDF.js获取pdf文件的坐标位置，后端使用C# iTextSharp

				
			

			

				

					zhouyy781的博客
				

				

					08-18
					
					2598
					
				

			

		

		

			
				
前端使用PDF.js获取鼠标点击pdf文件的坐标位置，实现在pdf文件中添加印章

			
		

	





	

		

			

				
					
获取鼠标坐标的的方法（兼容性）

				
			

			

				

					scwMason的博客
				

				

					10-13
					
					401
					
				

			

		

		

			
				
JavaScript 获取鼠标点击位置坐标

在一些DOM操作中我们经常会跟元素的位置打交道，鼠标交互式一个经常用到的方面，令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果，这篇文章就上鼠标点击位置坐标获取做一些简单的总结，没特殊声明代码在IE8，FireFox，Chrome下进行测试兼容

 

鼠标点击位置坐标

相对于屏幕

如果是涉及到鼠标点击确定位置相对比较简单，获取到鼠...

			
		

	





	

		

			

				
					
案例：当鼠标在第一个div中移动时，在第二个div中显示鼠标相应的坐标值

				
			

			

				

					路虽远，行则必至！
				

				

					06-26
					
					1498
					
				

			

		

		

			
				
下面给大家分享一个小案例，如下图：
目的：当鼠标在第一个 div 中移动时，可以在第二个 div 中会显示鼠标对应的坐标值

一、创建两个 div 元素并为其设置 CSS 样式，如下图：

运行效果，如下图：

二、书写 JavaScript 部分，先获取两个 div 元素，如下图：

三、当鼠标移入第一个 div 时，触发上述效果，因此我们使用"onmousemove"事件，如下图：


on...

			
		

	





	

		

			

				
					
JavaScript　坐标计算

				
			

			

				

					wangxiaohu__的专栏
				

				

					12-07
					
					1444
					
				

			

		

		

			
				
屏幕坐标：描述的是桌面上的一个浏览器窗口的位置，他们相对于桌面的左上角来度量
                                                                                                  视窗(viewport)坐标：描述的是在WEB浏览器中的视口的位置，相对于视口的左上角度量

			
		

	





	

		

			

				
					
Three.js中的raycaster射线获取模型不准确问题

				
			

			

				

					haodiaoji9386的博客
				

				

					09-06
					
					1649
					
				

			

		

		

			
				
Three.js中的raycaster射线获取模型不准确问题

			
		

	



              




          





        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值