Question

我遇到的问题是$('.someclass').on('mousemove', function() { do something });。因此，当我将鼠标悬停在一个按钮上时，它会动态添加一个跟随鼠标的元素，一旦我的计数器达到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

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

小提琴：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;
}

Answer 2

错字：我想这只是$声明中遗漏remove()符号的错误。

重置你的计数器并删除mousemove

以下是工作示例：https://jsfiddle.net/uLo91hqb/3/

应该是这样的：

mouse_move = 0;
$('.someClass').on('mouseover', function () {

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

    // Show the counter again
    // Purpose for >=0 is for fast mousemovement sometime 0 may not been recorded
    // It it quickly counts 3-4 .. You can see it in fiddle
    if (mouse_move >= 0) 
        $('.element').show();

    $('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) {
            // Remove mousemove from the body
            $('body').off('mousemove');
            // Reset counter
            mouse_move = 0;
            $('.element').hide();
        }
        mouse_move++;
        $('.counter').html(mouse_move);

    });

});

Answer 3

来自the doc：

$( selector ).hover( handlerIn, handlerOut )

handlerIn：鼠标指针进入元素时执行的函数。

handlerOut：鼠标指针离开元素时执行的函数。

示例：

＆＃13;

$('p').hover(function () {
  $(this).css('color', '#f00')
}, function () {
  $(this).css('color', '#000')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover me</p>

＆＃13;

您可以按照我的示例编辑您的js代码。

希望这对你有所帮助。

Answer 4

我不知道你的变量＆＃39; mouse_move＆＃39;永远定义或重置。
尝试：

$('.someClass').on('mouseover' function() { 
  var mouse_move = 0;
  ...
});

JQuery mouse不能重启

4 个答案: