Question

Hello我的开发人员，

我在浏览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 tipsy插件）。在我提供的示例中，我在弹出的面板中放置了2个链接。两者都有一个醉意的附加。所以在悬停时会显示一个提示。一切都好。

问题是，如果我触摸笔尖，面板会关闭。我不想要那样。所以我在onmouseleave事件上添加了另一个检查...来检查“离开元素”是否有点... ...

但问题（我猜）是在事件发生之前醉酒摧毁，所以我无法检查“离开元素”是否有问题。（对于$（'。tipsy'）我变空了，当然$（'。tipsy'）[0]未定义。

请指教！

Answer 1

请参阅此演示：http://jsfiddle.net/hk5ka/8/或JS窗格中包含提示的相同代码（适用于IE）http://jsfiddle.net/hk5ka/9/

这里是鼠标离开的更新条件：

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

  if($out_el != $btn && (!$(e.toElement).hasClass("tipsy") && $(e.toElement).closest(".tipsy").length == 0)){
    $('#panel').hide();
  }
});

Answer 2

Working demo

你的mouseleave的条件是让它隐藏。试试这个。

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

jquery mouseleave：输入提示时不要触发

2 个答案: