Javascript 为什么clientX的减法会破坏JS事件处理程序？_Javascript

Javascript 为什么clientX的减法会破坏JS事件处理程序？

javascript

Javascript 为什么clientX的减法会破坏JS事件处理程序？,javascript,Javascript,参加网络编程课程。我们做了一个练习，拍摄一张图片，把它拖过来放出来。但我们遇到了一个谜此代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> // Mouse move event handler function

参加网络编程课程。我们做了一个练习，拍摄一张图片，把它拖过来放出来。但我们遇到了一个谜

此代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script> 

// Mouse move event handler
function move(e)
{
    var x;
    x = document.getElementById( "picture" );

    var left = e.clientX-50;
    var top = e.clientY-50;

    x.setAttribute( "style", "top: " + top + "px; left: " + left + "px;");
}
// End function move()

// Mouse click event handler
function grab(e)
{
    document.addEventListener( "mousemove", move, false);

}
// End function grab()

// Mouse click release event handler
function drop(e)
{
    document.removeEventListener( "mousemove", move, false);

}
// End function drop()

    document.addEventListener( "mousedown", grab, false);
    document.addEventListener( "mouseup", drop, false);
</script>

<style> 

#picture
{position:absolute;
top:20px;
left:20px;
}
</style>
</head>

<body>

<h1> 
<img id='picture' src='ugly.jpg'> </h1>


</body>
</html>

在任何时候都不起作用

var left = e.clientX;
var top = e.clientY;

sorta将光标放在图像的顶端。我使用了一组可怕的嵌套eventhandler函数，并且使用了-50，没有任何问题

从clientX中减去50怎么能完全改变处理程序的行为呢

谢谢你的任何想法。提前谢谢

史蒂夫

PS我的代码是：

var myleft = e.clientX - 50;
var mytop = e.clientY - 50;
var mystyle = "left:" + myleft + "px; top:" + mytop + "px";
bigImage.setAttribute("style", mystyle);

效果很好

无论是否使用

-50

，对我来说都很好。也许你可以给“根本不起作用”下一个定义。以及您是否在控制台中收到错误消息。很抱歉延迟@出于某种原因，你真的需要一个Ctrl-F5来刷新Chrome中的页面。使用-50px时，当您按下鼠标并尝试拖动时，您会看到典型的重影图像，当您向上鼠标时，它会启动mousemove，imge会跟随光标在页面周围移动，直到您单击（而不是鼠标向下）释放图像。如果没有-50，当你按下鼠标时，它会随你一起拖动，然后鼠标将其释放。只有两个问题。1）因为no-50-50，光标就在图像的上角。2）使用doc.addevent而不是node.addevent，然后在doc上的任意位置按下鼠标开始移动。

var myleft = e.clientX - 50;
var mytop = e.clientY - 50;
var mystyle = "left:" + myleft + "px; top:" + mytop + "px";
bigImage.setAttribute("style", mystyle);