在任意位置顯示/隱藏並單擊任意位置

Question

我有一個用作工具提示的div，以及顯示此工具提示的鏈接。這部分工作正常。

<div class="tooltip"> 
    <span class="tooltip_help"> 
     <a onclick="toggleTooltips('tooltip1');" title="Tip"> 
      <img src="/ca/images/general/tooltip.png" alt="tooltip icon" title="Tip" align="absmiddle" border="0" /> 
     </a> 
    </span> 
    <div id="tooltip1" class="tooltip_box"> 
     <span> 
      tip text here. 
     </span> 
    </div> 
</div> 

我想要做的就是讓它在頁面的任何位置（包括div本身內部）隨着點擊而隱藏。我非常接近它，但它有時需要雙擊，有時會根據頁面上任意位置的點擊顯示。這是與Mootools。

<script language="javascript" type="text/javascript"> 
function toggleTooltips(id) { 
    var e = document.id(id); 
    if(e.style.display=='block') { 
     e.style.display='none'; 
     document.removeEvent('click', function() { 
      toggleTooltips(id); 
     }); 
    } else { 
     e.style.display='block'; 
     document.addEvent('click', function() { 
      toggleTooltips(id); 
     }); 
    } 
} 
</script> 

任何幫助，將不勝感激。

Answer 1

我不是mootools的專家，但我想象你需要調用addEvent和removeEvent具有完全相同的功能 - 而不是兩個功能做同樣的事情。我的猜測是，mootools無法刪除點擊偵聽器，因爲它正在尋找一個未真正註冊的函數。即它正在尋找函數A，但你註冊的函數是函數B.它們做同樣的事情，但它們不是同一個函數。

其結果是，文檔上的點擊偵聽器永遠不會被刪除，而是每次點擊切換元素 - 並且每次都添加一個新的切換函數。點擊幾次後，單擊文檔中的任意位置會導致元素來回多次來回切換X次。如果X是一個奇數，它似乎按預期工作。如果它是平坦的，它將不會有任何明顯的效果。

試試這個

function toggleTooltip(id) { 
    var e = document.id(id); 
    if(!e.toggleCallback) { 
     e.toggleCallback = function() { toggleTooltip(id); }; 
    } 
    if(e.style.display=='block') { 
     e.style.display='none'; 
     document.removeEvent('click', e.toggleCallback); 
    } else { 
     e.style.display='block'; 
     document.addEvent('click', e.toggleCallback); 
    } 
} 

我也勸你不要使用onclick屬性，因爲你已經使用的mootools。相反，請設置一個事件偵聽器，以在文檔加載時觸發。然後使用它來查找需要切換的元素，並將其設置在那裏。

編輯：這就是我的意思：http://jsfiddle.net/au32j/1/