如何在不提示頁面的提示中創建自動關閉鏈接，而無需重新加載頁面？

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>

相關小提琴： 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之前稍微向下滾動來完成。

任何幫助將非常感激。 我覺得我缺少明顯的東西。

Answer 1

在用於單擊html元素或.closetip元素的事件處理程序中，如果它是定位點，則調用e.preventDefault() ：

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