如何 enable/disable 进入离开包含元素时的 mousemove 函数（使用 mouseenter 和 mouseleave）

Question

所以现在我正在制作一个鼠标移动功能，当我在屏幕上移动时，它有一个 div 跟随我的光标。我想将该元素保留在 "header" 块中，所以现在只要我的光标离开 header 元素，我就用 css 和 mouseleave 函数让它消失。

我想做的是，当我离开 header 元素时，div 的定位从页面加载时重置到其原始位置。为了清楚起见，这是我编辑的 js 片段：

$( ".homehero" ).mouseleave(function() {
    // Not sure how to change this function here to turn off:
    /* $(document).mousemove(function(e) {
           $('.case-study #scene').offset({
               left: e.pageX + 70,
               top: e.pageY + 70
           });
        });  */
    $( "#scene" ).addClass( "hide-hero" ); // currently just hiding it 
});
$( ".homehero" ).mouseenter(function() {
    $(document).mousemove(function(e) {
        $('.case-study #scene').offset({
            left: e.pageX + 70,
            top: e.pageY + 70
        });
    });
    $( "#scene" ).removeClass( "hide-hero" ); // currently just showing it again on mouseenter
});

注意，#scene 是 header .homehero 元素内部的 div。下面是我目前正在做的事情的截图。

感谢任何见解！

Answer 1

虽然您可以使用 jQuery 的 off() 方法让您实际删除侦听器，但您需要保留对该函数的引用以便 off() 仅删除该侦听器.否则你将不得不调用 .off("mousemove")。在没有函数引用的情况下调用时，它将删除 all 侦听器。如果其他一些代码需要添加相同的事件，这可能会导致问题。

相反，您可以像其他人一样设置 mousemove。然后使用您在 mouseenter 中设置并在 mouseleave 中取消设置的标志。在您的 mousemove 回调中测试该标志，如果它测试为 false

则立即离开

var enableMove = false;

$(document).mousemove(function(e) {
  if(!enableMove) return;

  $('.case-study #scene').offset({
    left: e.pageX + 70,
    top: e.pageY + 70
  });
});

$( ".homehero" ).mouseleave(function() {
  enableMove = false;
  $( "#scene" ).addClass( "hide-hero" );
});

$( ".homehero" ).mouseenter(function() {
  enableMove = false;
  $( "#scene" ).removeClass( "hide-hero" ); 
});

至于定位问题，您可以将元素的坐标保存在 mouseenter 上，然后使用保存的数据设置退出时的坐标。您可以使用 jQuery 的 data() 方法来保存元素本身的信息并在以后检索它。

//in mouseenter
var $element = $('.case-study #scene');
$element.data("originalCoordinates",$element.offset());

//in mouseleave
var $element = $('.case-study #scene');
$element.offset( $element.data("originalCoordinates") );

Answer 2

$('selector')
        .mouseleave(function() {
      $('targetSelector').animate({ 'margin-left': '0px' }, 250 );
    })
    .mouseenter(function() {
        $('targetSelector').animate({ 'margin-left': '150px' }, 
250 );
  });

如何 enable/disable 进入离开包含元素时的 mousemove 函数（使用 mouseenter 和 mouseleave）

How to enable/disable the mousemove function when entering leaving a contained element (using mouseenter & mouseleave)

javascript

jquery

mousemove

mouseenter

mouseleave