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

Answer 2

这是因为每次mousedown事件触发时都会绑定mouseup事件你可以在mouseup函数结束时添加$("#canvas").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');
        });
});

Answer 3

正确的代码是：

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

Answer 4

这是因为每次运行mousedown时都会为mouseup注册一个新的监听器。你应该在mousedown函数之外移动mouseup代码。

问候
托拜厄斯

Answer 5

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

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

Answer 6

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

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

6 个答案: