Javascript 通过调用函数清理鼠标指针？

我想通过调用名为

showKeyTip

的新函数来清理工具提示插件的

mouseenter

部分。（这也使我能够在mouseenter中使用if语句来控制悬停）

我是从

mouseleave

中如何处理

setTimeout

得到这个想法的，但是由于某种原因，类似的调用在

mouseenter

中不起作用

我觉得我遗漏了什么，或者不完全理解

$（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的建议，这个谜题还有最后一块

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

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

我目前的立场是向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中进行了一些尝试和错误之后，我认为我找到了一个很好的解决方案，可以在用户的鼠标光标位于工具提示上方时显示工具提示。我也从错误的角度来处理这个问题。。。return keyTip.on（）语句合法吗

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

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

谢谢你为我指明了正确的方向

  // [ 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

  });

---

在窗口范围内调用函数时，窗口显然是

this

的值
您需要引用这些函数，而不是在其他匿名函数中调用它们，以便将

this

的值保留为元素

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

---

请注意，如果您所做的只是调用集合上的

，那么您可以放弃
每个
调用，因为jQuery会进行迭代。
更正代码的最简单方法是将
此
作为参数传递给
showKeyTip
函数

电话是

showKeyTip(this);

和函数声明

function showKeyTip(t){
   .....
   var targetH = $(t).height()/2,
   .....
}

谢谢我已经应用了这种方法并更新了上述代码。我现在的问题是，如何处理鼠标是否在工具提示上。（继续显示if悬停）if语句应该在hideKeyTip函数中还是在这个.on中？我想你是在尝试这样做->再次感谢你的快速回复。。。我在那个例子中看到了你所做的，但这并不是我想要的。如果你看一下我最近的编辑，它似乎没有抓住工具提示来保持显示
function showKeyTip(t){
   .....
   var targetH = $(t).height()/2,
   .....
}