javascript - 在任何地方单击时显示/隐藏隐藏

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 无法删除点击监听器，因为它正在寻找实际上尚未注册的功能。 IE。它正在寻找功能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/