JQuery mousemove未重新启动

JQuery mousemove not restarting

本文关键字：重新启动 mousemove JQuery      更新时间：2023-09-26

我遇到的问题是$('.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++;
  });
});

这里有一个快速示例。不确定这是否是你想要的，但我仍然支持上面的评论。我不认为你每次都在mouseover上重新创建那个元素。

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

来自文档：

$( selector ).hover( handlerIn, handlerOut )

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

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

示例：

$('p').hover(function () {
  $(this).css('color', '#f00')
}, function () {
  $(this).css('color', '#000')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hover me</p>

你可以按照我的例子来编辑你的js代码。

希望这对你有所帮助。

我不知道在哪里定义或重置了变量"mouse_move"
尝试：

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

Typo:我想这只是remove()语句中缺少$符号的错误。

重置计数器并移除鼠标移动

以下是工作示例：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);
    });
});
相关文章：