javascript - mouseup 事件有问题

Question

大家好，我的代码运行良好，但我希望脚本在鼠标松开事件上停止。

这是我现在拥有的一个示例。 如何在鼠标按下事件时停止脚本，以便它看起来只在拖动图像时显示坐标。

谢谢!

http://jsfiddle.net/Hc7x4/20/

$(document).ready(function () {
    $("#map-catcher").mousedown(function (e) {

        $("#map-catcher").mousemove(function (e) {
            $("#coord").text("x:"+e.offsetX+", y:"+e.offsetY);
              return;
        });

         $("#map-catcher").mouseup(function (e) {
          return;
         });        

   });
});

Answer 1

使用 mousemove 事件参数

我认为最简单的方法是检查 mousemove 事件的事件参数，您应该能够确定鼠标按钮是否按下...

$(document).ready(function () {
    $("#map-catcher").mousemove(function (e) {
        if (e.which == 1) {
            $("#coord").text("x:" + e.offsetX + ", y:" + e.offsetY);
        }
    });
}

Here is a working example

注意:我不能 100% 确定此方法的跨浏览器兼容性(在 Chrome 中测试)

使用全局标志

如果这不能按您希望的方式工作，您可以使用全局标志来尝试它，该标志可以跟踪鼠标当前是否处于按下状态...

var moveMode = false;

$(document).ready(function () {
    $("#map-catcher").mousedown(function (e) {
        moveMode = true;
    });

    $("#map-catcher").mousemove(function (e) {
        //only set the coordinates when the flag is true
        if (moveMode) {
            $("#coord").text("x:" + e.offsetX + ", y:" + e.offsetY);
        }
    });

    $("#map-catcher").mouseup(function (e) {
        moveMode = false;
    });
});

Here is a working example

注意:如果您在 "#map-catcher" 元素之外释放鼠标，可能会导致一些错误效果。将 mouseup 事件更改为在 document 级别上工作可能是个好主意。像这样:

$(document).mouseup(function (e) {
    moveMode = false;
});