jQuery с несколькими событиями выполнить ту же функцию рефакторинга


Я работаю в проекте, который использует функцию, чтобы показать модальное диалоговое окно. Диалоговое окно может быть скрыто, вызывая hideModal (функция). Эта функция вызывается:

  • Нажав клавишу Esc
  • Нажав на модальный фон
  • Нажав на кнопку Закрыть

Мой текущий код:

 $("#modal").click(function() {
    hideModal();
});

$("#modal-object-container > a").click(function(e) {
    hideModal();
    e.preventDefault();
});

$(document).keydown(function (e) {

    if (e.keyCode == '27') {
        hideModal();
    }

});

У меня есть чувство, что должен быть более быстрый способ, чтобы связать все эти события сразу.



6812
2
задан 21 ноября 2011 в 01:11 Источник Поделиться
Комментарии
1 ответ

Ваш код не все так плохо. Однако, поскольку вы не обязательных ключевых событий на документ, нужно оставить место для других ключевых событий, которые будут связаны, для других задач, так что ваш код не вмешиваться с другими функциями ЭКУ.

Концепция заключается в том, что вы свяжете на кнопку, и уберите на сокрытие вашего модала. Таким образом, ключевые события применим только тогда, когда ваш код выполняется.

// save your doc once, it's faster
var doc = $(document);
// bind a function, which you can unbind later, so esc can be used in other cases as well, without triggering your function
doc.bind('keydown', _processKey);

// on click binding for as many elements as you like.
// The preventDefault shouldn't influence other elements in this case.
$("#modal, #modal-object-container > a").click(function(ev) {
ev.preventDefault();
hideModal();
});

// when you hide your modal, you unbind the event, so the document is free for other events and functions
function hideModal() {
doc.unbind('keydown', _processKey);
}

// have a 'private' function to do what you want. This way you can unbind it anytime you like
function _processKey(ev) {
if (ev.keyCode == '27') {
hideModal();
}
}

1
ответ дан 22 ноября 2011 в 12:11 Источник Поделиться