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

qq_26891887 2015-03-26 02:36:29

我是想在鼠标点击的地方出现一个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>

...全文

368 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2015-03-27

打赏
举报

加上滚动的距离就好了，注意兼容性 <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; }

functionsub 2015-03-26