Question

我有一些代码行，它会在mousedown编辑后将元素移动到鼠标位置。

我想删除附加到它的事件，因此在mouseup之后它不会再跟随鼠标位置了！

问题

mouseup之后，该元素仍然跟随鼠标！

我希望它在mousedown上跟随鼠标并在mouseup之后停止关注鼠标！如何从元素中删除mousemove侦听器？

这是 JS

jQuery(document).ready(function ($) {
    $(".crossY").on("mousedown", function (e) {
        var j = $(this);
        $(document).on("mousemove", function (e) {
            j.css({
                "top": e.pageY,
                "left": e.pageX
            });
        });
    })

    $(".crossY").on("mouseup", function (e) {
        var j = $(this);
        $(document).on("mousemove", function (e) {
            j.css({
                "top": j.css("top"),
                "left": j.css("left")
            });
        });
    });
});

和 FIDDLE DEMO

Answer 1

要删除鼠标侦听器，您需要使用jQuery .off方法。为了使其易于使用，您应该命名mousemove事件。这样您就可以轻松分离必要的mousemove听众。

在mousedown内我们想要附加监听器

$(document).on('mousemove.following', function (e) { /* my event handler */ })

在我们想要分离监听器的mouseup内

$(document).off('mousemove.following')

following命名空间确保没有其他事件侦听器被分离。

这是https://stackoverflow.com/a/21444065/4477927这个工作（你的jsfiddle除了更新）。

您可能想要做的另一件事是将移动部件置于鼠标下方。

$(".crossY").on("mousedown", function (e) {
    var j = $(this);
    var height = j.height(), width = j.width();
    $(document).on("mousemove", function (e) {
        j.css({
            "top": e.pageY - height/2,
            "left": e.pageX - width/2,
        });
    });
})

减去元素高度和宽度的一半使元素保持在鼠标下方的中心，这也将确保mouseup偶数被触发。

Answer 2

尝试使用bind()和unbind()，如下所示： DEMO

jQuery(document).ready(function ($) {
    $(".crossY").on("mousedown", function (e) {
        var j = $(this);
        $(document).bind("mousemove", function (e) {
            j.css({
                "top": e.pageY-10,
                "left": e.pageX-10
            });
        });
    })

    $(".crossY").on("mouseup", function (e) {
        var j = $(this);
        $(document).unbind("mousemove");
    });
});

Answer 3

尝试

jQuery(document).ready(function ($) {
$(".crossY").on("mousedown", function (e) {
    var j = $(this);
    $(document).on("mousemove", function (e) {
        j.css({
            "top": e.pageY,
            "left": e.pageX
        });
    });
})

$(".crossY").on("mouseup", function (e) {
    var j = $(this);
    $(document).off("mousemove");
});

}）;

jQuery - 如何销毁附加到元素的事件？

问题

3 个答案: