javascript - 通过调用函数来清理 mouseenter 吗？

Question

我想通过调用名为 showKeyTip 的新函数来清理工具提示插件的 mouseenter 部分。 (这也使我能够在 mouseenter 内使用 if 语句来控制悬停)

我从 mouseleave 中如何处理 setTimeout 得到了这个想法，但由于某种原因，类似的调用在 mouseenter 中不起作用。 ..

我觉得我错过了一些东西，或者不完全理解 $(this) 是如何与事物联系在一起的。

如有任何意见/建议，我们将不胜感激。

<小时/>

当前代码(片段):

  // [ hide ]
  function hideKeyTip(){
    timer = setTimeout(function(){
        keyTip.stop().fadeOut(faderate)}, timeout); 
  }

  // [ control ]
  return this.each(function(){

    $(this)

    .on("mouseenter", function(){

      clearTimeout(timer);

      // dimensions
      var targetH = $(this).height()/2,
          targetW = $(this).width();

      // position
      var top = $(this).offset().top - targetH + padtop,
          left = $(this).offset().left + targetW + padleft;

      // apply css & show
      keyTip.css({
        'top': top, 
        'left': left
      }).show(); 
    })// mouseenter

    .on("mouseleave", function(){

      hideKeyTip();

    });// mouseleave    
  });// return this

<小时/>

清理版本(不起作用)

我将 mouseenter 的内容移动到一个名为 showKeyTip 的新函数中，并在 mouseenter 中调用它。

  // [ hide ]
  function hideKeyTip(){
    timer = setTimeout(function(){
        keyTip.stop().fadeOut(faderate)}, timeout); 
  }

  // [ show ]
  function showKeyTip(){

      clearTimeout(timer);

      // dimensions
      var targetH = $(this).height()/2,
          targetW = $(this).width();

      // position
      var top = $(this).offset().top - targetH + padtop,
          left = $(this).offset().left + targetW + padleft;

      // apply css settings & show
      keyTip.css({
        'top': top, 
        'left': left
      }).show(); 
  }

  // [ control ]

  return this.each(function(){

    $(this)

    .on("mouseenter", function(){

      showKeyTip();

    })// mouseenter

    .on("mouseleave", function(){

      hideKeyTip();

    });// mouseleave    
  });// return this

<小时/>

更新:清理版本 2(工作)

根据adeneo的建议，这个谜题还有最后一 block ......

在测试用例中滚动以悬停或鼠标输入/悬停工具提示的最佳方式是什么？

如果将鼠标悬停在我的上方，我希望继续显示工具提示。

我目前的立场是在 hideKeyTip 函数中添加 if 语句，但是工具提示在显示时会挂起，并且在鼠标离开时不会淡出。

  // [ hide ]
  function hideKeyTip(){
    if(!keyTip.hover()){
      timer = setTimeout(function(){
        keyTip.stop().fadeOut(faderate)}, timeout); 
    }
  }

  // [ show ]
  function showKeyTip(){

      clearTimeout(timer);

      // dimensions
      var targetH = $(this).height()/2,
          targetW = $(this).width();

      // position
      var top = $(this).offset().top - targetH + padtop,
          left = $(this).offset().left + targetW + padleft;

      // apply css settings & show
      keyTip.css({
        'top': top, 
        'left': left
      }).show(); 
  }

  // [ control ]
  return this.on({

    mouseenter: showKeyTip,
    mouseleave: hideKeyTip

  });// return this

<小时/>

更新:悬停控件(帮助!)

当用户将鼠标悬停在实际工具提示上时，尝试重用隐藏和显示功能来显示工具提示。 (当工具提示中存在链接时很有用。)

有什么建议吗？我究竟做错了什么？谢谢...

  // [ hide ]
  function hideKeyTip(){
      timer = setTimeout(function(){
        keyTip.stop().fadeOut(faderate)}, timeout); 
  }

  // [ show ]
  function showKeyTip(){

      clearTimeout(timer);

      // dimensions
      var targetH = $(this).height()/2,
          targetW = $(this).width();

      // position
      var top = $(this).offset().top - targetH + padtop,
          left = $(this).offset().left + targetW + padleft;

      // apply css settings & show
      keyTip.css({
        'top': top, 
        'left': left
      }).show(); 
  }

  // [ control ]
  return this.on({

    mouseenter: showKeyTip,
    mouseleave: hideKeyTip

  });

  return keyTip.on({  
    // note: keyTip = $(settings.tooltip);
    mouseenter: function(){
      clearTimout(timer);
    },
    mouseleave: hideKeyTip
  });

<小时/>

最终更新:悬停控制(已解决)

经过在 codepen 中的一些尝试和错误，我想我已经找到了一个很好的解决方案，可以在用户的​​鼠标光标悬停在工具提示上时显示工具提示。我也从错误的 Angular 解决了这个问题... return keyTip.on() 语句合法吗？

这就是我的想法。如果您能指出此方法的任何缺点，请告诉我。

当我清理完代码笔后，我会将其发布在下面的评论中。

感谢adeneo为我指明了正确的方向。

  // [ hide ]
  function hideKeyTip(){

     // note: keyTip = $(settings.tooltip);

     keyTip.on({
        mouseenter: function(){
           //you have arrived
        }, 
        mouseleave: function(){
           timer = setTimeout(function(){
              keyTip.stop().fadeOut(faderate)}, timeout); 
        };
     });
  }

  // [ show ]
  function showKeyTip(){

      clearTimeout(timer);

      // dimensions
      var targetH = $(this).height()/2,
          targetW = $(this).width();

      // position
      var top = $(this).offset().top - targetH + padtop,
          left = $(this).offset().left + targetW + padleft;

      // apply css settings & show
      keyTip.css({
        'top': top, 
        'left': left
      }).show(); 
  }

  // [ control ]
  return this.on({
    mouseenter: showKeyTip,
    mouseleave: hideKeyTip

  });

Answer 1

调用窗口作用域内的函数时，窗口显然就是this的值。
您需要引用这些函数，而不是在其他匿名函数中调用它们，以将 this 的值保留为元素。

return this.on({
           mouseenter : showKeyTip,
           mouseleave : hideKeyTip,
});

请注意，如果您所做的只是在集合上调用 on，则可以删除 each 调用，因为 jQuery 会迭代。