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

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,则只需在每次显示时重置计数器.这样做的最佳位置是在函数提供的回调函数中fadeOut,因此只有在div被隐藏后才会重新开始计数.

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