如何在 jquery 中同时单击两个 div 时停止函数 multi fire

Question

我想在单击 clickme 或 clickme2 div 时调用我的函数，我也只想调用我的函数一次，但它会调用 2 次，当两次 [=25= 时如何停止 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 相同的处理程序，那么你将不得不创建类似基本的 互斥体 (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

您必须为互斥量布尔值附带一个倒计时数字。你会做这样的事情

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;         
        }
    }
}

Answer 2

您可以使用一行：event.stopPropagation();

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

在这里您可以看到更新后的 fiddle，它运行良好。 http://jsfiddle.net/Leu7vmf6/1/

Answer 3

实际上这是 Mozilla 的一个问题，我们必须在参数中传递事件。

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

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

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

*{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;
}

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

如何在 jquery 中同时单击两个 div 时停止函数 multi fire

how can stop function multi fire when two div clicked at same time in jquery

jquery

function

click

编辑