输入离开包含的元素时如何启用/禁用mousemove功能（使用mouseenter和mouseleave）

Question

因此，现在我正在做一个mousemove功能，当我在屏幕上移动时，光标后面跟随着一个div。我想将该元素保留在“标题”块中，所以现在我只要让光标离开标题元素就可以通过css和mouseleave函数使其消失。

我要做的是，当我离开标题元素时，将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是标头.homehero元素内部的div。下面是我目前正在做的屏幕截图。

赞赏任何见解！

Answer 1

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

您可以像其他鼠标一样设置鼠标移动。然后使用您在mouseenter中设置而在mouseleave中未设置的标志。在mousemove回调中测试该标志，如果测试为假，则立即退出

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