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

我有一些代码行，在元素被

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

而

试试看

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(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

.off

方法。为了使其易于工作，您应该为

mousemove

事件命名名称。这将允许您轻松分离必要的

mousemove

侦听器

在

mousedown

中，我们希望附加侦听器

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

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

在

mouseup

中，我们要分离侦听器

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

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

命名空间后面的

确保没有分离其他事件侦听器

下面是这项工作的一个示例（除了更新的JSFIDLE）

您可能要做的另一件事是使移动部件在鼠标下方居中

$(".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
被激发。
尝试使用
bind（）
和
unbind（）
如下：

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

元素仍在跟随鼠标！你试过看JSFIDLE吗？我试过了！我的浏览器是firefox！在firefox中，鼠标居中移动，这对我来说很有用。虽然这样做的方式可能是绑定/解除绑定处理程序，这比简单地将单个
mousemove
处理程序绑定到
mousedown/up
事件之外，并根据共享变量更改其行为要花费更多的开销……比如：我还将
mouseup
放在
文档上，因为指针可能不直接在移动的对象上元素，当您单击鼠标时。你可以用两种方法进行实验。