多次调用mousedown()中的Mouseup()

mouseup() in a mousedown() called multiple times

本文关键字：Mouseup 中的 mousedown 调用      更新时间：2023-09-26
$("#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处理程序附加到#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;
    }
});

这是因为每次触发mousedown事件时都会绑定mouseup事件。
您可以简单地在鼠标up功能的末尾添加$("#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');
        });
});

这是因为每次运行mousedown时都要为mouseup注册一个新的侦听器。你应该把mouseup的代码移到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").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;
    $(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');
相关文章：