jquery - 当两个div同时点击jquery时如何停止函数多重触发

Question

我想在单击clickme或clickme2 div时调用我的函数，我也想只调用我的函数一次，但它会调用2次，当同时单击两个div时如何停止mlti调用？谢谢

HTML

<div id="clickme">
   <div id="clickme2">Add</div>
</div>

CSS

*{margin:0 auto; padding:0;}

#clickme {
    height:150px;
    width:150px;
    background-color:#999;
    display:block;
    text-align:center;
    line-height:150px;
    font-size:35px;
}   
#clickme2 {
    height:120px;
    width:120px;
    border:dashed thin #003;
}

jQuery

$("#clickme, #clickme2").mouseover(function() {
    $(this).css("cursor", "pointer");
    $(this).css("color", "#CCC");       
})
$("#clickme, #clickme2").mouseout(function() {
    $(this).css("color", "#000");       
})

$("#clickme, #clickme2").click(function() {
    click_event() 
})

var i = 1;
function click_event() {
    alert(i)
    i++;    
}

Answer 1

您的 div clickme2 位于 clickme 内。因此，对 clickme2 的任何点击也将是对 clickme 的点击。因此，您分配给 clickme 的任何点击处理程序都将通过点击 clickme2 来触发。我要做的就是仅将点击处理程序分配给 clickme2，然后处理程序只会被触发一次。

如果出于某种原因您确实需要在 clickme 上放置与 clickme2 相同的处理程序，那么您将必须创建类似基本 < 的内容em>互斥体 (mutual excluder)。

即使使用脚本语言，这也相当容易做到。基本上写的是这样的。

var mutex = false;

function calledTwice() {
    if (!mutex) {
        mutex = true; // similar to locking a mutex
        // your code goes here
    } else {
        // this function was already called - second handler resets the mutex
        mutex = false;
    }
}

这应该确保(或者，因为它在脚本语言中不完善，所以很可能)该事件处理程序仅真正触发一次。

编辑

对于两个以上的叠加 Div

您必须在互斥 bool 值后面加上一个倒数的数字。你会做这样的事情

var mutex = false;
var count = n; // n is the number of calls you expect

function calledTwice() {
    if (!mutex) {
        mutex = true; // similar to locking a mutex
        // your code goes here
    } else {
        // this function was already called, but only reset if all calls are passed
        count--; // decrement the count
        if (count <= 0) {
            // now this is the last call - you may reset the mutex
            count = n; // make sure to do this before resetting the boolean
            mutex = false;         
        }
    }
}