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/

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

1 个答案: