如何重新启动事件mousemove jquery？答案

【问题标题】：How to restart event mousemove jquery?如何重新启动事件mousemove jquery？
【发布时间】：2014-01-02 01:24:13
【问题描述】：

我必须通过单击来移动 div，再次单击我必须将 div 停止在该位置。现在的问题是：当我想再次移动 div 时，没有激活 mousemove 事件……我该如何解决？

$('.move_div').live('click', function() {                    
    $('html').on('mousemove', function(e) {
       var x = e.pageX - this.offsetLeft;
       var y = e.pageY - this.offsetTop;
       $('div').css({'top': y, 'left': x});
    });
    $("html").live('click', function() {
       $('html').off('mousemove');
    });
});

【问题讨论】：

你能为这个jsfiddle.net做一个小提琴吗
jsfiddle.net/62Fmx

标签： javascript jquery html css mousemove

【解决方案1】：

var ele = '.move_adv';
var moveBool = false;

$(function () {
    $('html').on('mousemove', function (e) {
        console.log($(this).width());
        if (moveBool == true) {
            var x = e.pageX - $(ele).width()/2;
            var y = e.pageY - $(ele).height()/2;
            $(ele).css({
                'top': y,
                    'left': x
            });
        }
    });
});

$(ele).live('click', function () {
    moveBool = !moveBool;
});

http://jsfiddle.net/6y24s/2/

主要逻辑是将 div 的“可移动性”状态存储在布尔值中。

您还想进一步完善代码。

【讨论】：

是的，点击不会停止 firefox 和 Internet Explorer 中的 mousemove 事件
更新了答案并清理了代码。这应该有效。

【解决方案2】：

Fiddle here ，如果你想保留你的代码，那么你需要添加的只是

event.stopPropagation();

【讨论】：

我试了还是不行，鼠标的点击必须启动和停止div的移动

【解决方案3】：

当您单击 div 时，mousemove 处理程序将添加到 div。然后将一个事件处理程序添加到删除任何 mousemove 事件处理程序的文档中。
然后移动鼠标，div 跟随，单击，mousemove 处理程序被删除。您再次单击 div，添加了一个 mousemove 事件处理程序，但随后文档中的 click 事件处理程序取消了 mousemove 处理程序。
因此，每当您在前两次单击后单击时，mousemove 处理程序都会同时创建和销毁。

也使用 .on() 代替 .live()
.live() 在 JQuery 1.7 中被弃用了

【讨论】：