javascript - jQuery 函数的问题

Question

到目前为止，我已经创建了一个函数，该函数具有一个计数器，每当单击“链接”时该计数器就会累积，并在您单击“链接”之外时重置。当计数器==2时，您将被重定向到链接页面并且计数器重置。这可能是一个愚蠢的错误或其他什么，因为我是 jQuery 的新手，但由于某种原因，我的计数器永远不会重置，所以当您单击链接，然后单击链接之外，然后返回链接时，您将被重定向，这是不应该发生的。 Here's my Bootply .

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">                            
                        <li class="dropdown">   
                            <a href="page.html" class="dropdown-toggle" data-toggle="dropdown"><span>Link</span><b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

jQuery:

 $(document).on("click", "span", function() {
    if(typeof $(this).data('clicks') == 'undefined') {
        $(this).data('clicks', 1);
    } else {
        $(this).data('clicks', $(this).data('clicks')+1);
    }
    if ($(this).data('clicks')==2){
            $(this).data('clicks', 0); 
            $(this).window.open("page.html");
    }
});

$(document).click(function(event) {     
    if(!$(event.target).closest("span").length) {   
        $(this).data('clicks', 0);
    }     
});   

建议？

编辑:使用下面的建议，它几乎完美地工作。似乎单击“链接”下方稍远的位置，使菜单下降，然后单击“链接”会导致第二次单击无法注册，因此您不会被重定向。有没有办法修复这个小错误？它一定与事件的目标有关。

编辑＃2:我设法通过添加(糟糕的标记，ik)使其工作:

if (counter==1 && $('.dropdown-menu').is(":visible")) {
    window.open("accomplishments.html");
    resetCounter();
}

正上方

if (shouldOpen()) {
    window.open("accomplishments.html");
    resetCounter();
}

Answer 1

有两个问题:

1:单击链接内的范围(即转到该链接)时，您不会取消默认操作。您可以通过在回调 e 中接受一个参数(即已发生的事件)并调用其 preventDefault() 方法来完成此操作。

2:您正在重置 this 上的计数器，而不是 span。

这是工作代码:

$(document).on("click", "span", function (e) {

     e.preventDefault();

     if (typeof $(this).data('clicks') == 'undefined') {
         $(this).data('clicks', 1);
     } else {
         $(this).data('clicks', $(this).data('clicks') + 1);
     }
     if ($(this).data('clicks') == 2) {
         $(this).data('clicks', 0);
         window.open("page.html");
     }

     console.log($(this).data('clicks'));
 });

 $(document).click(function (event) {
     if (!$(event.target).closest("span").length) {
         $('span').data('clicks', 0);
     }
 });

这是一个 JSFiddle:http://jsfiddle.net/LqrGd/

我认为除非您有充分的理由将数据绑定(bind)到 DOM，否则不要这么做。计数器可以只是一个简单的 JS 变量 counter。这是另一个这样做的例子:

http://jsfiddle.net/k8wGW/1/

var counter = 0;

$(document).on("click", "span", function (e) {

     e.preventDefault();

    counter++;

     if (counter === 2) {
         window.open("page.html");
         counter = 0;
     }

 });

 $(document).click(function (event) {
     if (!$(event.target).closest("span").length) {
         counter = 0;
     }
 });

您可以通过使用函数和常量来表达您的意图来进一步清理它:

http://jsfiddle.net/k8wGW/3/

var counter = 0;

const EMPTY_COUNTER = 0, FULL_COUNTER = 2;

var shouldOpen = function () {
    return counter === FULL_COUNTER;
};

var resetCounter = function () {
    counter = EMPTY_COUNTER;
};

var incrementCounter = function () {
    counter++;
};

$(document).on("click", "span", function (e) {

    e.preventDefault();
    incrementCounter();

    if (shouldOpen()) {
        window.open("page.html");
        resetCounter();
    }

});

$(document).click(function (event) {
    if (!$(event.target).closest("span").length) {
        resetCounter();
    }
});

您在编辑中遇到的问题是因为它只注册了对 span 的点击来增加计数器。正如您所看到的，跨度非常小。如果您将其更改为监听整个 a 元素的点击，您应该获得所需的行为: