Javascript 在jQuery中包装事件是否可能，最简单的方法是什么

背景

我想模拟大多数浏览器在点击链接时支持的“活动”行为。对于任何元素和事件，我希望能够在事件期间向元素添加css类。因此，在psuedo jQuery代码中，我想这样做：

$(".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');
            });
    });

---

如果我将更多的处理程序绑定到“单击”，任何人都可以建议一个足够健壮的解决方案来维护包装。

好吧，对于奖励点，它是免费的，您可以为同一事件提供任意数量的处理程序。

---

不，关于你最初的问题，我不明白。是否要在非链接元素上模拟“活动”行为？如果是这样，那么将mousedown/mouseup环境绑定到addClass/removeClass方法就可以了。

问题是没有通用的方法来确定何时完成异步调用。您需要在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);

当异步部分完成时

---

编写“start”和“finish”函数可能会更容易，您可以在函数的开头和事件完成后对元素调用这些函数。

mousedown和mouseout并不能完全做到这一点。假设非链接元素上的单击操作是一个AJAX请求，需要3秒钟才能返回。链接上的“活动”行为是链接在单击返回之前处于活动状态。重复绑定并不能完全修复它。假设我这样做了：clickbindOne$myMagicWrapper clickBindTwo然后事件将触发如下：addClass（'active'）；bindOneFunc removeClass（“活动”）；需要时使用bindtowunc:addClass（'active'）；bindOneFunc bindTwoFunc removeClass（“活动”）；