Javascript 我如何处理这些事件，为什么我的代码不起作用？

我需要做以下工作。当用户单击div时，我希望在用户将光标移动到div上并按住鼠标左键的同时保存鼠标坐标。当用户离开div或释放左按钮时，我想停止记录坐标。我有以下代码：

$(document).ready(function() {
            var coordhdl = new coordinateHandler();
            $("#test").mousedown(function(e) {

                $("#test").mousemove(function(ee) {

                    $("#test").mouseup(function(e) {
                        stopIt = true;
                    });
                    if(stopIt == false)
                    {
                        coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
                    }


                });

            }); 


        });

此代码存在以下问题： 即使用户只单击div而不按左键，它也会记录坐标。 单击后，它不会停止记录坐标

---

我是javascript/jquery新手，所以对它了解不多。感谢您的帮助。

不要将事件处理程序附加到事件处理程序中。每次移动鼠标时，都会附加一个新的

mouseup

事件处理程序。它们不会被覆盖，而是被附加

改用“全局”标志：

$(document).ready(function() {
    var coordhdl = new coordinateHandler(),
        recording = false;

    $("#test").mousedown(function(e) {
        recording = true;
    }).mousemove(function(e) {
        if(recording) {
            coordhdl.addCords(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        }
    }).mouseup(function(e) {
        recording = false;
    });
});

---

每次有

mousedown

事件时，您添加一个

mousemove

处理程序，每次鼠标移动时，您添加另一个

mouseup

处理程序。我看不出

stopIt

变量是在哪里声明的，因此该变量的范围也可能是一个问题。您不需要嵌套处理程序，因此可以这样尝试

$(document).ready(function() {
        var coordhdl = new coordinateHandler();
        var isRecording = false;
        $("#test").mousedown(function(e) { isRecording = true })
                  .mouseup(function(e) { isRecording = false })
                  .mousemove(function(ee) {
                     if(isRecording)
                     {
                         coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
                     }
                  });
    });

---

这样的办法应该行得通。当分别按下/释放鼠标时，它将标志设置为true/false。当鼠标移动时，如果设置了标志，将添加坐标：

$(document).ready(function() {
    var isDown = false,
        coordhdl = new coordinateHandler();
    $("#test").mousedown(function() {
       isDown = true;
    }).mouseup(function() {
       isDown = false;  
    }).mousemove(function(e) {
        if(isDown) {
            coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
        }
    });
});

---

下面是一个类似的例子（它只是将坐标写入

p

元素，而不是使用

coordinateHandler

对象）。

由于某些原因，这对我不起作用。这里的另外两个答案也是如此。当我松开按钮时，它不会停止录制。你测试过这个代码吗？可能是我的浏览器出了问题。我在用IE8@Luke-是的，我在答案中发布的链接中测试了它。看看这个，看看它是否适合你。