jQuery

Question

我有一些代码可以在 mousedown-ed 之后将元素移动到鼠标位置。

我想删除附加到它的事件，这样它在 mouseup-ed 后就不会再跟随鼠标位置了！

问题

元素在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(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");
});

});

Answer 2

要删除鼠标侦听器，您需要使用 jQuery .off 方法。为了让它更容易地工作，你应该为 mousemove 事件命名空间。这将允许您轻松分离必要的 mousemove 侦听器。

在 mousedown 中我们要附加监听器

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

在 mouseup 中我们要分离监听器

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

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

这是此工作的 example（您的 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 even。

Answer 3

尝试像这样使用 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");
    });
});

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

jQuery - How to destroy an event which is attached to an element?

javascript

events

mouseevent

mouseup

问题