Почему слушатель щелчка документа срабатывает немедленно?

Question

Почему слушатель щелчка документа срабатывает немедленно?

0

Я хочу привязать функцию клика к документу, открыв какое-то меню с помощью щелчка. Проблема в том, что при запуске первого события "нажмите на меню", функция, прикрепленная к документу, была вызвана тем же событием и закроет меню. Как решить эту проблему. Мой код выглядит примерно так:

$('#openMenu').bind('click touchend', function(e){
    e.preventDefault();
    $('.openMobMenu').removeClass('openMobMenu');//Close All elements
    var _this=$('#headMenu')
    _this.addClass('openMobMenu');

    $(document).bind('click touchend',{elem:_this},hideElementMob);
});

// bind click event listner to the document
function hideElementMob(e){

    var th=e.data.elem;//Get the open element
    var target=$(e.target);//Get the clicked target

        //Check the target and close the element if need
    if(target.parents('.openMobMenu').length==0) { 
        th.removeClass('openMobMenu');//close the element if need
        //Unbind listner after closing the element
        $(document).unbind('click touchend');
    } 
}

Заранее спасибо!

Kaloyan Stamatov 24 фев. 2014, в 12:08

Источник

0

bind была заменена. Используйте on .
John Dvorak 24 фев. 2014, в 10:20
1

Вы связываете событие щелчка с документом каждый раз, когда нажимаете, чтобы открыть меню. Было бы лучше проверить, нажали ли вы на #openMenu в своей функции скрытия.
putvande 24 фев. 2014, в 10:41

Теги:

javascript

jquery

1 ответ

Ещё вопросы

bind была заменена. Используйте on .
Вы связываете событие щелчка с документом каждый раз, когда нажимаете, чтобы открыть меню. Было бы лучше проверить, нажали ли вы на #openMenu в своей функции скрытия.

lionel · Accepted Answer · 2014-02-24T08-04-00.000Z

Попробуйте добавить обработчик закрытия с небольшой задержкой:

setTimeout(function(){
    $(document).bind('click touchend',{elem:_this},hideElementMob);
}, 10);

И, как предположил Ян Дворжак, вы должны использовать.on() для присоединения событий.

ОБНОВИТЬ
Я понял, что не ответил на весь вопрос, так что вот некоторые улучшения для " почему он ведет себя как эта ":

Когда событие click происходит на #openMenu, соответствующий обработчик выполняется первым. Это связывает событие click с самим документом.
После этого событие становится пузырьковым, поэтому родители #openMenu также получают событие click, а так как document.body является родителем #openMenu, он также получает событие click и закрывает всплывающее окно.

Чтобы отменить e.stopPropagation(); событий, вы также можете вызвать e.stopPropagation(); в любом месте вашего обработчика событий. (возможно, это более чистое решение по сравнению с setTimeout)

Спасибо, этот тайм-аут сделал работу!