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

我有一个作为工具提示的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>

任何帮助，将不胜感激。

---

我不是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/

链接地址: http://www.djcxy.com/p/83951.html

上一篇: Show/Hide with Hide On Click Anywhere

下一篇: How jQuery distinguish between 'data' and 'selector' parameter?