jquery - jQuery mouseleave:输入提示时不触发

您好我的同伴开发人员，

我在抛光UI时遇到了一些麻烦。

我制作了一个弹出面板，当我将鼠标悬停在按钮/链接上时会打开。

无论我退出该按钮/链接还是退出面板本身，此面板均应关闭。非常简单。

HERE（jsFiddle）我做了一个简单的演示，并且效果很好。

我的JS代码：

$('[data-tip]').tipsy({fade: true, gravity: 's'});

$('#btn').mouseenter(function(e){
  $('#panel').show();
}).mouseleave(function(e){
  var $panel = $('#panel')[0];
  var $out_el = $(e.relatedTarget)[0];

  if($out_el != $panel){
    $('#panel').hide();
  }
});

$('#panel').mouseleave(function(e){
  var $btn = $('#btn')[0];
  var $out_el = $(e.relatedTarget)[0];
  var $tipsy = $('.tipsy')[0];

  if($out_el != $btn && $out_el != $tipsy){
    $('#panel').hide();
  }
});

和HTML标记

<a href="#" id="btn">BUTTON</a>

<div id="panel">
  <a href="#" title="1" data-tip="test 1">Test anchor 1</a>
  <a href="#" title="2" data-tip="test 2">Test anchor 2</a>
</div>

问题是提示。（确切地说是jquery tipy插件）。
在提供的示例中，我在弹出面板中放置了2个链接。两者都有一个棘手的附件。因此，在悬停时会显示一个提示。一切安好。

问题是，如果我触摸笔尖，面板将关闭。我不想要那个。
因此，我在onmouseleave事件中添加了另一项检查...，以检查“ leave element”是否过于棘手...

但是问题（我想）是事件发生之前，tipsy销毁了，所以我无法检查“ leave element”是否为tipies。（对于$（'。tipsy'），我为空，当然$（'。tipsy'）[0]未定义。

请指教！

最佳答案

Working demo

您的mouseleave条件使它隐藏起来。试试这个吧。

$('#panel').mouseleave(function(e){
  if (e.target==this) $(this).hide();
});

Tipsy

jquery - jQuery mouseleave:输入提示时不触发