如何获取鼠标在屏幕的位置，用window.event.screenY 获取Y轴的位置好象总是不对。

时间：2021-03-31 10:23:43
我是想在鼠标点击的地方出现一个DIV，但是div 纵坐标总是不对
不知道下面的代码有什么问题，鼠标点击页面，div纵坐标显示总是不对 

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script>
  function test(){
	var e =  window.event;
    var xPosition = e.screenX;
	var yPosition = e.screenY-100;
	var tooltip = document.getElementById("tooltip");
	tooltip.style.left=xPosition+"px";
	tooltip.style.top=yPosition+"px";
    var text = document.getElementById("testinfo");
	text.innerHTML ="x:"+xPosition+" y:"+yPosition;
  }
  </script>
  <style>
  #tooltip {  
 position:absolute;  
 /** position:relative; **/

 width:200px;  
 height:auto;  
 padding:10px;  
 background-color:white;  
   
 -webkit-border-radius:10px;  
 -moz-border-radius:10px;  
 border-radius:10px;  
   
 -webkit-box-shadow:4px 4px 10px rgba(0,0,0,0.4);  
 -moz-box-shadow:4px 4px 10px rgba(0,0,0,0.4);  
 box-shadow:4px 4px 10px rgba(0,0,0,0.4);  
  
 pointer-events:none;  
}

#tooltip.hidden{  
 display:none;  
}
 
#tooltip p{  
 margin:0;  
 font-family:sans-serif;  
 font-size:16px;  
 line-height:20px;  

  </style>
 </head>

 <body>
 <div id="tooltip" class="hildden" style="">  
 <p><strong>提示信息：<span id="testinfo"></span></strong></p>  
 
</div>
  <p onclick="test();">
  test11111111
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
 <br>
  <br>
  <br>
  <br>
  test222222222
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  test33333333333333333333
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  test44444444444444
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
test 55555555555555
 <br>
  <br>
  <br>
   <br>
  <br>
  <br>
   <br>
  <br>
  <br>
  test 666666666666666
  <br>
  <br>
  <br>
   <br>
  <br>
  <br>
   <br>
  <br>
  <br>
  test 7777777777777777777
  <br>
  <br>
  <br>
   <br>
  <br>
  <br>
   <br>
  <br>
  <br>
  test 88888
   <br>
  <br>
  <br>
  </p>
 </body>
</html>

4 个解决方案

#1

e.clientY

#2

e.clientY 页面长，有滚动条的时候位置就不对了，没有滚动条的情况下就可以。

#3

那就加上body的scrollTop..

#4

加上滚动的距离就好了，注意兼容性
<p onclick="test( event);">


      function test( e) {
          e = window.event || e;
          var xPosition = e.clientX;
          var yPosition = e.clientY - 100;
          var xScroll = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
          var yScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
          var tooltip = document.getElementById("tooltip");
          tooltip.style.left = xPosition  + xScroll + "px";
          tooltip.style.top = yPosition  +yScroll+ "px";
          var text = document.getElementById("testinfo");
          text.innerHTML = "x:" + xPosition + " y:" + yPosition+" xScroll:"+xScroll+" yScroll:"+yScroll;
      }

#1

e.clientY

#2

e.clientY 页面长，有滚动条的时候位置就不对了，没有滚动条的情况下就可以。

#3

那就加上body的scrollTop..

#4

加上滚动的距离就好了，注意兼容性
<p onclick="test( event);">


      function test( e) {
          e = window.event || e;
          var xPosition = e.clientX;
          var yPosition = e.clientY - 100;
          var xScroll = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
          var yScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
          var tooltip = document.getElementById("tooltip");
          tooltip.style.left = xPosition  + xScroll + "px";
          tooltip.style.top = yPosition  +yScroll+ "px";
          var text = document.getElementById("testinfo");
          text.innerHTML = "x:" + xPosition + " y:" + yPosition+" xScroll:"+xScroll+" yScroll:"+yScroll;
      }
标签：

相关文章