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

所以现在我正在制作一个mousemove函数，当我在屏幕上移动时，在我的光标后面有一个div。我想将该元素保留在“header”块中，所以现在只要在光标离开header元素时使用css和mouseleave函数，它就会消失

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

$（.homehro”）.mouseleave（函数（）{
//不确定如何在此处更改此功能以关闭：
/*$（文档）.mousemove（函数（e）{
$（'.案例研究#场景'）。偏移量({
左：e.pageX+70，
顶部：e.pageY+70
});
});  */
$（“#场景”）.addClass（“隐藏英雄”）；//当前正在隐藏它
});
$（“.homehore”）.mouseenter（函数（）{
$（文档）.mousemove（函数（e）{
$（'.案例研究#场景'）。偏移量({
左：e.pageX+70，
顶部：e.pageY+70
});
});
$（“#场景”）.removeClass（“隐藏英雄”）；//目前正在mouseenter上再次显示它
});

注意，

#scene

是标题

.homehore

元素内部的div。下面是我现在正在做的一个截图

---

感谢您的真知灼见

虽然可以使用jQuery的方法来删除侦听器，但需要保留对该函数的引用，以便off（）只删除该侦听器。否则，您将不得不调用

.off（“mousemove”）

。在没有函数引用的情况下调用时，它将删除所有侦听器。如果其他代码需要添加相同的事件，这可能会导致问题

相反，您可以像其他人一样设置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的方法保存元素本身的信息，并在以后检索它

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

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

---

调用并重置位置。这将有助于至少在这里看到HTML和CSS，如果不是MCVEhmm，我尝试了这个片段，除了删除添加/删除类行，因为在新的解决方案中不需要这样做，然后在mouseenter上，将

启用移动

更改为true，因为我希望

mousemove

效果在

中起作用。homehero

阻止

场景

阻止生活在其中。我遇到的问题是，数据元素无法预料地将

#场景

块重新设置回其原始位置；如果我在

mouseleave

上以某种方式移动光标，它可能会在

之外的页面上的其他地方重置其位置。homehero

下面是一个结果示例：@Alex您是否正在将元素的css位置更改为绝对位置？如果是这样，则不需要保存坐标，只需将位置设置回原始的“静态”，并将“左”、“上”都设置为0是！所以我使用的是flexbox和绝对定位的组合，但我所做的是获取您的代码片段，按照mouseenter/leave的建议删除数据元素，然后放回add/remove类。只是现在，我添加和删除了一个类，该类覆盖了原始定位，并将顶部、左侧、右侧和底部设置为0。英雄重置{左：0！重要；右：0！重要；上：0！重要；下：0！重要；对齐自我：居中！重要；边距：自动！重要；}到目前为止，这似乎已经成功了。谢谢

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