Question

我需要计算一段内容的点击次数 - 之后，我需要运行某个功能。只有在用户完成所需的点击后，我才能在每次点击时运行该功能。

点击量需要为1,2或3及以上，我只想在一次或两次点击时执行某些操作，并忽略其他任何内容。

注意我只需要在点击后运行功能，然后重置计数器。

我已尝试过以下操作，但它记录了单个＆＃39;每次点击后。

var clicks = 0; $(controller).click(function() { var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0; clicks += 1; // Reset triple click counter if no click is made within 500ms setTimeout(function() { clicks = 0; }, 500); setTimeout(function() { if (clicks >= 3) { console.log("triple or more"); } if (clicks === 2) { console.log("double"); } if (clicks === 1) { console.log("single"); } }, 200); });

Here is a JSBin example

Answer 1

点击3次后，您很难看到自己想要发生什么，是否要为每个点击触发三次点击。

我创建了一个您可能想要查看的版本：http://jsbin.com/dutilojujowa/5/edit

这些想法是：

将所有点击计数器数据保存到数据属性中，而不是依赖于范围 - 我发现这更容易。
限制重置计数器，否则可以非常奇怪地处理多次点击
限制您的行动计数器，否则您可能会意外地进行多项行动！
确保您在某个时刻将$ elem.data（＆＃39;点击次数）设置为1，否则它将无法正常工作。

Answer 2

您需要在功能结束时更新$elem.data('clicks')。见http://css-tricks.com/snippets/jquery/triple-click-event/

Answer 3

您可以尝试以下代码：

var totalCount;
    var intervalVar;
    var ShowResultVar;
    function HandleClicks() {
        totalCount = totalCount + 1;
    }

    function ShowResult() {
        if(totalCount == 0)
        {
            console.log("No Clicks");
        }
        else if (totalCount == 1)
        {
            console.log("One Click");
        }
        else if(totalCount == 2)
        {
            console.log("Two Clicks");
        }
        else if (totalCount >2) {
            console.log("Three or more Clicks");
        }
    }

    $(document).ready(function () {
        totalCount = 0;
        $("#myControl").bind("click", HandleClicks);
        intervalVar = setInterval(function () {
            totalCount = 0;
        }, 500);
        ShowResultVar = setInterval(function () {
            ShowResult();
        }, 200);
    });

这对我有用。输出如下：

 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 One Click 
 Two Clicks 
 One Click 
 Two Clicks 
 No Clicks 
 One Click 
 Two Clicks 
 No Clicks 
 One Click 
 Two Clicks 
 Two Clicks 
 Three or more Clicks 
 One Click 
 One Click 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks 
 No Clicks

Answer 4

试试这个 -

   $("#content").data('clicks', 0);
$("#content").click(function () {
    var elem = this,
        $elem = jQuery(elem);
    var clicks = $elem.data('clicks') + 1
    $elem.data('clicks', clicks);
    if (clicks == 1) {//start re-setter and counter when first click 
        setTimeout(function () {
            $elem.data('clicks', 0);
        }, 500);
        setTimeout(function () {
            var clicks = $elem.data('clicks');
            if (clicks >= 3) {
                console.log("triple or more");
            }
            if (clicks === 2) {
                console.log("double");
            }
            if (clicks === 1) {
                console.log("single");
            }
        }, 200);
    }
});

内容点击计数器

4 个答案:

DEMO