-
本版专家分：0结帖率 50% -
我是想在鼠标点击的地方出现一个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>
-
本版专家分：21611
-
- 黄花 2013年4月 Web 开发大版内专家分月排行榜第二
-
-
蓝花
2017年12月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
-
-
e.clientY
-
本版专家分：0
-
e.clientY 页面长，有滚动条的时候位置就不对了，没有滚动条的情况下就可以。
-
本版专家分：21611
-
- 黄花 2013年4月 Web 开发大版内专家分月排行榜第二
-
-
蓝花
2017年12月 Web 开发大版内专家分月排行榜第三
2013年3月 Web 开发大版内专家分月排行榜第三
-
-
那就加上body的scrollTop..
-
版主本版专家分：395983
-
- 探花 2017年 总版技术专家分年内排行榜第三
-
-
进士
2018年总版新获得的技术专家分排名前十
2013年 总版技术专家分年内排行榜第五
-
-
金牌
2018年5月 总版技术专家分月排行榜第一
2018年4月 总版技术专家分月排行榜第一
2018年2月 总版技术专家分月排行榜第一
2017年8月 总版技术专家分月排行榜第一
-
-
银牌
2018年3月 总版技术专家分月排行榜第二
2017年11月 总版技术专家分月排行榜第二
2016年2月 总版技术专家分月排行榜第二
2014年2月 总版技术专家分月排行榜第二
2013年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;
}
