Question

背景

我想模拟大多数浏览器在点击链接时支持链接的“活动”行为。对于任何元素和事件，我希望能够在事件持续时间内向元素添加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');
            });
    });

如果我将其他处理程序绑定到“点击”，那么任何可以建议足够强大的解决方案以保持包装的人的加分点。

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);

异步部分完成时。

编写“start”和“finish”函数可能会更容易，您可以在函数开头和事件结束后调用元素。

Answer 2

嗯，对于奖励积分，它是免费的，因为你可以尽可能多的处理程序你想要同一个事件。关于你最初的问题，我没有说明问题。您想模拟非链接元素上的“活动”行为吗？如果是这样，将mousedown / mouseup绑定到addClass / removeClass方法应该可以解决问题。

在jQuery中包装事件是否可行，以及最简单的方法是什么

2 个答案: