在任何地方单击时显示/隐藏隐藏 [英] Show/Hide with Hide On Click Anywhere

问题描述

我有一个用作工具提示的div，以及一个显示此工具提示的链接.这部分工作正常.

I have a div that acts as a tooltip, and a link to show this tooltip. This part works fine.

<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一起使用的.

What I'm trying to do is set is so that it will hide with a click anywhere on the page (including inside of the div itself). I'm pretty close to having it, but it sometimes requires double clicks, and sometimes will show itself based on a click anywhere on the page. This is with 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>

任何帮助将不胜感激.

推荐答案

我不是mootools专家，但我想您需要使用完全相同的函数调用addEvent和removeEvent，而不是两个函数做同样的事情.我的猜测是，mootools无法删除点击侦听器，因为它正在寻找尚未实际注册的功能. IE.它正在寻找功能A，但您注册的功能是功能B.它们执行相同的操作，但功能不同.

I'm no mootools expert, but I'd imagine that you need to call addEvent and removeEvent with the exact same function - not two functions that do the same thing. My guess is that mootools can't remove the click-listener because it's looking for a function that hasn't actually been registered. I.e. it's looking for function A, but the function you registered is function B. They do the same thing, but they aren't the same function.

结果是永远不会删除文档上的单击侦听器，而是每次单击都会切换元素-并且每次也会添加新的切换功能.单击几次后，单击文档中的任何位置都会导致元素来回切换X次.如果X是一个奇数，它似乎可以正常工作.如果是偶数，它将没有任何明显的效果.

The result is that the click-listener on the document is never removed, and instead toggles the element with every click - and a new toggle-function is added each time too. Once you've clicked a few times, clicking anywhere in the document results in the element toggling back and forth X number of times. If X is an odd number, it seems to work as expected. If it's even, it won't have any apparent effect.

尝试一下

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.而是将事件侦听器设置为在文档加载后触发.然后使用它来查找需要切换的元素，然后将所有内容设置在那里.

I'd also advise you to not use the onclick attribute, since you're already using mootools. Instead, set up an event listener to fire when the document has loaded. Then use that to find the elements that need toggling, and set everything up there.

这就是我的意思: http://jsfiddle.net/au32j/1/

这篇关于在任何地方单击时显示/隐藏隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！