在任意位置显示/隐藏并单击任意位置

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/