Question

我想在用户右键单击多次（例如5次点击）后出现一些内容。然后应该显示一个div。

现在我正在使用此代码：

document.oncontextmenu = function() { 
    $("#red").fadeIn(500).show().delay(3000).fadeOut(800);
    return false;
};

这种方法很好，但是我在我的请求中说了五次尝试。

更新：这是正确的代码！

document.oncontextmenu = (function() {
var counter = 0;
return function() { 
    counter++;
    if (counter == 5) {
        $("#red").fadeIn(500).show().delay(3000).fadeOut(800, function() {
        counter = 0;
    });
    }
    return false;
};

}）（）;

感谢@James Thorpe

Answer 1

使用你拥有的东西，但把它包装在一个带有变量的闭包中，以计算内部函数执行的次数：

document.oncontextmenu = (function() {
    var counter = 0;
    return function() { 
        counter++;
        if (counter == 5)
            $("#red").fadeIn(500).show().delay(3000).fadeOut(800);
        return false;
    };
})();

请注意，外部函数会立即调用以创建变量，然后将内部函数作为事件处理程序返回。通过使用这样的闭包，我们将与事件相关的所有内容（包括计数器变量）保留在本地范围内，而不会将任何内容泄漏到全局范围。

如果您希望能够多次调用div，则只需在每次显示时重置计数器。最好的地方是callback function提供给fadeOut函数，因此只有在div被隐藏后才会重新开始计数。

if (counter == 5) {
    $("#red").fadeIn(500).show().delay(3000).fadeOut(800, function() {
        counter = 0;
    });
}

如何在5次右键单击后显示div

1 个答案: