1

我正在使用 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>

相关小提琴：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();
  });

此变体的相关小提琴：http: //jsfiddle.net/u62eH/

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

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

4

1 回答 1

1

在用于单击html元素或元素的事件处理程序中，如果它是锚点.closetip，则调用：e.preventDefault()

$("html, .closetip").click(function(e) {
    if(e.target.nodeName === 'A')
        e.preventDefault();
    $(".tipsy").remove();
});
于 2013-10-25T15:21:04.810 回答