Можно ли и как проще всего обернуть события в jQuery?

Question

Фон

Я хотел бы смоделировать "активное" поведение, которое большинство браузеров поддерживают для ссылок при их нажатии. Для любого элемента и события я хотел бы иметь возможность добавить класс CSS к элементу на время события. Так что в jQuery-коде psuedo я хотел бы сделать это:

$(".button").click(function() { alert('clicked'); });

.....

$(".button").each( function()
    {
        var self = $(this);
        var innerClick = self.click;
        self.click( function()
            {
                self.addClass('active');
                innerClick();
                self.removeClass('active');
            });
    });

Бонусные баллы для тех, кто может предложить решение, достаточно надежное для поддержки переноса, если я назначу другим обработчикам «щелкнуть».

Answer 1

Проблема в том, что нет общего способа определить, когда выполняется асинхронный вызов. Вам нужно будет установить какой-нибудь флаг после того, как AJAX-вызов (например) завершен, и опросить его с помощью setInterval.

С синхронными функциями браузер, вероятно, не будет обновлять отображение, пока обработчик щелчков не будет выполнен, так что вы никогда не увидите активное состояние. Вы можете обойти это, используя setTimeout, чтобы удалить активный класс через 1/10 секунды. Для этого случая вы можете написать такую ​​функцию:

function makeClickHandler(innerFunction) {
    return function(event) {
        var self = this;
        $(self).addClass('active');

        innerFunction.call(self, event);

        window.setTimeout(function() {
            $(self).removeClass('active');
        }, 100);
    }
}

Вы можете обернуть любые обработчики кликов в функцию makeClickHandler:

$(".button").click(makeClickHandler(function() { alert('clicked'); }));

Вот пример того, как вы можете обрабатывать асинхронные события, но на этом этапе может быть проще добавить / удалить класс в отдельных обработчиках событий.

function makeAsyncClickHandler(innerFunction) {
    return function(event) {
        var self = this;
        $(self).addClass('active').data("done", false);

        innerFunction.call(self, event);

        var intervalID = window.setInterval(function() {
            if ($(self).data("done")) {
                $(self).removeClass('active');
                window.clearInterval(intervalID);
            }
        }, 100);
    }
}

Внутренняя функция должна вызывать

$(this).data("done", true);

когда асинхронная часть закончена.

Вероятно, было бы проще написать функции «начало» и «завершение», которые можно вызывать для элемента в начале функции и после завершения события.

Answer 2

Ну, за бонусный балл он предоставляется бесплатно, так как вы можете обработать столько раз, сколько захотите на одном и том же событии. Нет, по поводу вашего первоначального вопроса, я не понял. Вы хотите смоделировать "активное" поведение не связанного элемента? Если это так, то связывание событий mousedown / mouseup с методами addClass / removeClass должно помочь.