javascript - 如何在不重新加载页面的情况下在醉酒工具提示中创建自动关闭链接？

Question

我正在使用 Tipsy 来显示一些内容；在此内容中，我有一个链接(一个大 X)，用于关闭工具提示。然而，当单击时，它只是跳转到页面顶部并且无法关闭工具提示，即使我将其设置为返回 false。我的代码如下所示:

$(".favs").tipsy({
    fade: true,
    gravity: 'n',
    trigger: "manual",
    html: true,
    offset: 5,
    opacity: '0.9',
    delayIn: 0,
    delayOut: 0,
    title:
      function() {
        return $("#favs_1").html();
      }
    });

  $(".favs").click(function(){
    $(this).tipsy("show");
    return false;
  });

  $(".closetip").click(function(){
    $(".tipsy").remove();
    return false;
  });

应用于此 HTML:

<div style="height: 1800px;">
    <br /><br /><br /><br />
    <a href="#" class="favs">Favorite Movies</a>
</div>

<div id="favs_1" style="display: none;">
  <a href="#" class="closetip" style="float: right;">X</a>

  Tooltip content
</div>

相关 fiddle :http://jsfiddle.net/gZkJJ/

通过在工具提示关闭中添加任何点击结果，我解决了一半的问题。我尝试使用 event.stopPropagation(); 来免除某些 div 中的点击。 -- 这导致工具提示被关闭，但是 a) 有问题的 div 也不能幸免，b) X 仍然跳到页面顶部。与上面相同的 HTML，但 JavaScript 略有不同:

$(".favs").tipsy({
    fade: true,
    gravity: 'n',
    trigger: "manual",
    html: true,
    offset: 5,
    opacity: '0.9',
    delayIn: 0,
    delayOut: 0,
    title:
      function() {
        return $("#favs_1").html();
      }
    });

  $(".favs").click(function(){
    $(this).tipsy("show");
    return false;
  });

  $("html, .closetip").click(function() {
    $(".tipsy").remove();
  });

  $(".tipsy, .tipsy-n, .tipsy-inner, .favs").click(function(event){
    event.stopPropagation();
  });

此变体的相关 fiddle :http://jsfiddle.net/u62eH/

我添加了过多的高度和间距，以便您可以验证链接是重新加载框架还是强制滚动到顶部，您可以通过在点击 X 之前稍微向下滚动来完成此操作。

任何帮助将不胜感激。我觉得我错过了一些明显的东西。

Answer 1

在单击 html 元素或 .closetip 元素的事件处理程序中，调用 e.preventDefault()(如果是) anchor :

$("html, .closetip").click(function(e) {
    if(e.target.nodeName === 'A')
        e.preventDefault();
    $(".tipsy").remove();
});