Question

大家好，我有这个代码正常工作，但我希望脚本停止鼠标注册事件。

这是我现在拥有的一个例子。如何在鼠标向上事件上停止脚本，使其看起来只显示拖动图像时的坐标。

谢谢！

$(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

注意：我不是百分百确定此方法的跨浏览器兼容性（在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;
});

Answer 2

将您的事件绑定从mousedown处理程序中取出。此外，使用.on（）语法，如果我是你，我会使用mousedown和mouseup来添加和删除一个绑定到mousemove的类。

$('parent').on('mousedown', 'element', function(){
    $(this).addClass('active');
});

$('parent').on('mouseup','element', function(){
    $(this).removeClass('active');
});

$('parent').on('mousedown','element.active', function(){
    $(this).goCrazy();
});

有鼠标事件的问题

2 个答案: