javascript - mousedown() 中的 mouseup() 被多次调用

Question

$("#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);
    });
});

我遇到的问题是，第一次调用该函数后(第一次工作正常，并且符合预期)，mouseup 函数似乎被多次调用(即，将显示多个警报，而不仅仅是显示首先)。有没有办法防止这种情况发生，或者有更好的编码方法？

谢谢

Answer 1

每次移动鼠标时，您的代码都会将新 mouseup 处理程序附加到#canvas 元素。每次移动鼠标。使用 .one() 仅附加处理程序一次:

$(this).one('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;
    }
});