mouseup事件有问题

Having an issue with mouseup event

本文关键字：有问题 事件 mouseup      更新时间：2023-09-26

大家好，我有这段代码工作良好，但我希望脚本停止在鼠标上升事件。

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

谢谢!

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;
         });        
   });
});

使用鼠标移动事件参数

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

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

下面是一个工作示例

注意:我不是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;
    });
});

下面是一个工作示例

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

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

将事件绑定从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();
});
相关文章：