Показать / скрыть с помощью Hide On Click Anywhere - PullRequest
Новая
       11

Показать / скрыть с помощью Hide On Click Anywhere

2 голосов
/ 09 августа 2011

У меня есть 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>

Любая помощь будет оценена.

1 Ответ

2 голосов
/ 10 августа 2011

Я не эксперт по 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/

...