javascript - JQuery mousemove 未重新启动

Question

我遇到的问题是 $('.someclass').on('mousemove', function() { do some });。因此，当我将鼠标悬停在按钮上时，它会动态添加一个跟随鼠标的元素，一旦我的计数器达到 500，新元素就会被删除。这一切都工作正常，但是当将鼠标悬停在按钮上时，第二次就不起作用了。下面是一个代码示例。

每次将鼠标悬停在按钮上时，都应添加一个新的动态元素，然后在鼠标移动一定量后将其删除，但第二次悬停时将不起作用。

$('.someClass').on('mouseover' function() { 

  $('.element').appendTo('body');

  $('body').on('mousemove', function(e) {
    var mousex = e.pageX + 20;
    var mousey = e.pageY;
    $('.element').css({ top: mousey, left: mousex, position: 'absolute' });

    if (mouse_move >= 500) {
      ('.element').remove();
    }
    mouse_move++;

  });

});

Answer 1

这是一个简单的例子。不确定这是否是您想要的，但我仍然支持上面的评论。我没有看到您每次在鼠标悬停时都重新创建该元素。

fiddle :http://jsfiddle.net/AtheistP3ace/6k70v3x3/

JS:

$('.someClass').on('mouseover', function () {
    doStuff();
});

function doStuff() {

    $('.someClass').off('mouseover');
    $('<div class="element"></div>').appendTo('body');
    var mouse_move = 0;

    $('body').on('mousemove', function (e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY;
        $('.element').css({
            top: mousey,
            left: mousex,
            position: 'absolute'
        });

        if (mouse_move >= 500) {
            alert('removed');
            $('.element').remove();
            $('body').off('mousemove');
            $('.someClass').on('mouseover', function () {
                doStuff();
            });
        }
        mouse_move++;

    });
}

HTML:

<div class="someClass"></div>

CSS:

.someClass {
    width: 100%;
    height: 500px;
    background: red;
}
.element {
    height: 50px;
    width: 50px;
    background: yellow;
}