在下面的代码中,
<script>
var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if(!mie){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = mousePos;
var mouseX = 0;
var mouseY = 0;
function mousePos(e){
if(!mie){
mouseX = e.pageX;
mouseY = e.pageY;
}
else{
mouseX = e.clientX + document.body.scrollLeft;
mouseY = e.clientY + document.body.scrollRight;
}
/*document.formex.mousex.value = mouseX;
document.formex.mousey.value = mouseY;*/
document.write("X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date());
return true;
}
</script>
<小时/>
预期的输出是为移动时的每个鼠标位置呈现每个新条目。
我可以使用 document.write
对象以一个鼠标位置仅渲染一个条目。有没有更好的渲染方法?
最佳答案
document.write
clears the document以及其中的所有事件处理程序
试试这个
<script>
var mie = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if(!mie){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = mousePos;
var mouseX = 0;
var mouseY = 0;
function mousePos(e){
if(!mie){
mouseX = e.pageX;
mouseY = e.pageY;
}
else{
mouseX = e.clientX + document.body.scrollLeft;
mouseY = e.clientY + document.body.scrollRight;
}
/*document.formex.mousex.value = mouseX;
document.formex.mousey.value = mouseY;*/
document.write("X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date());
document.onmousemove = mousePos;
return true;
}
</script>
观察return true
之前添加的新语句以再次绑定(bind)事件。
或者简单地使用这一行而不是document.write
(由@Tom提供)
document.body.innerHTML = "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date();
如果你想追加就这样做
document.body.innerHTML += "X: " + mouseX + ";Y: " + mouseY + "; Time: " + new Date() + " </br>";
关于javascript - 使用 document.write 对象渲染鼠标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34281823/