javascript - 如何在 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，只需在每次显示时重置计数器即可。最好的地方是在 callback function 中。提供给 fadeOut 函数，以便仅在隐藏 div 后才重新开始计数。

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