Javascript 多次调用mousedown（）中的mouseup（）

我遇到的问题是，在第一次调用该函数后（第一次运行良好，正如预期的那样），mouseup函数似乎被多次调用（即，将显示多个警报，而不仅仅是第一次）。有没有办法防止这种情况发生，或者有更好的方法来编写代码

---

谢谢

这是因为每次运行mousedown时，您都会为mouseup注册一个新的侦听器。您应该将mouseup的代码移到mousedown函数之外

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;

    $(this).mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);
        $(this).unbind("mouseup");
    });
});

问候
Tobias

每次移动鼠标时，代码都会将一个新的

mouseup

处理程序附加到

#canvas

元素。使用

.one（）

仅连接处理程序一次：

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;
        
    $("#canvas").mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);
    });
});

但更好的解决方案是使用状态变量（以及适当的范围）：

正确的代码是：

var clicked = false;
var X1, Y1, X2, Y2;

$("#canvas").mousedown(function(e){
    X1 = (e.pageX - this.offsetLeft) - 8;
    Y1 = (e.pageY - this.offsetTop) - 8;

    clicked = true;
});


$("#canvas").mouseup(function(e){
    if (clicked) {
        X2 = (e.pageX - this.offsetLeft) - 8;
        Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);

        clicked = false;
    }
});

你每次打电话给mousedown都在重写鼠标

编辑

对不起，请把东西放在你想要的地方：

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;
}).mouseup(function(e){
    var X2 = (e.pageX - this.offsetLeft) - 8;
    var Y2 = (e.pageY - this.offsetTop) - 8;
    alert(X1 + " " + X2 + " " Y1 + " " + Y2);
});

---

这是因为每次mousedown事件激发时，mouseup事件都会被绑定。
您只需添加

$（“#canvas”）.unbind（'mouseup'）在mouseup函数的末尾

$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;

    $(this).mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " Y1 + " " + Y2);
        $(this).unbind("mouseup");
    });
});

我们最终在这里使用了几个不同答案的组合：

$("#canvas").mousedown(function(e){
        var X1 = (e.pageX - this.offsetLeft) - 8;
        var Y1 = (e.pageY - this.offsetTop) - 8;

        $("#canvas").mouseup(function(e){
            var X2 = (e.pageX - this.offsetLeft) - 8;
            var Y2 = (e.pageY - this.offsetTop) - 8;
            alert(X1 + " " + X2 + " " Y1 + " " + Y2);
            $("#canvas").unbind('mouseup');
        });
});

我的猜测是，你需要以某种方式逃避这个函数。也许尝试添加一个返回到MouxUp函数的底部。但是这不起作用，因为X1和Y1现在超出了SimeI，不会考虑在每个事件上重新绑定/解除绑定是一个很好的解决方案。然而，我明白如果mouseup事件不能在mousedown没有首先触发的情况下触发，那么这一点很重要，但是可以通过其他方式解决。当然，我不想批评。但有更好的方法可以做到这一点。示例：在鼠标向下和鼠标向上测试后清除之间使用一个标志。我认为这是一个很好的答案，因为它与作者的想法保持一致。当然，添加和删除侦听器、调用
$（“#canvas”）
或者甚至像我写的那样调用
$（这个）
都不是很好的方法。但是改变它，改变问题的想法。谢谢你的解决方案。这对我也有帮助$（文件）。解除绑定（“鼠标悬停”）；他不想解开穆斯敦的绑！！
$("#canvas").mousedown(function(e){
    var X1 = (e.pageX - this.offsetLeft) - 8;
    var Y1 = (e.pageY - this.offsetTop) - 8;

    $(this).mouseup(function(e){
        var X2 = (e.pageX - this.offsetLeft) - 8;
        var Y2 = (e.pageY - this.offsetTop) - 8;
        alert(X1 + " " + X2 + " " + Y1 + " " + Y2);
        $(this).unbind("mouseup");
    });
    $(this).unbind("mousedown);
});

$(document).unbind('mouseup');