mouseup () в mousedown () вызывается несколько раз

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

Ваш код присоединяет обработчик new 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

потому что событие mouseup связывается каждый раз, когда срабатывает событие mousedown.
Вы можете просто добавить $("#canvas").unbind('mouseup'); в конце функции 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.

EDIT

Извините, храните вещи там, где хотите:

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

Это потому, что вы регистрируете нового слушателя для mouseup каждый раз, когда запускается mousedown.Вы должны переместить код для mouseup вне функции mousedown.

С уважением
Tobias

Answer 5

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

Answer 6

В итоге мы использовали комбинацию из нескольких разных ответов:

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