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

Question

I want call my function when clickme or clickme2 div is clicked , also i want call my function just one time,but it will called 2 times, how can stop mlti call when two div is clicked at sametime? thank you

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

add a class to the parent div and access it. No need to provide separate ids to both the div. — bibliophilsagar, Dec 01 '15 at 05:35
please more explain @sagar patro , or if you think it is my answer please write it in answer section , thank you — MojtabaSh, Dec 01 '15 at 05:37
@MojtabaSh Use the parent div alone to fire those event handlers. — Akshay Gundewar, Dec 01 '15 at 05:41
I need two div at same time, i wrote a simple code here, i have many many same events in my codes that i shoud fix that — MojtabaSh, Dec 01 '15 at 05:45

William Rosenbloom · Accepted Answer · 2015-12-01T06:34:20.247

2

Your div clickme2 lies within clickme. Therefore any click on clickme2 will also be a click on clickme. Because of this, any click handler you assign to clickme will be triggered by a click on clickme2. What I would do is assign the click handler only to clickme2 and then the handler will only be triggered once.

If there is some reason you really need to place the same handler on clickme as clickme2 then you are going to have to create something like a rudimentary mutex (mutual excluder).

This will be fairly easy to do, even in a scripting language. Basically write something like this.

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

This should ensure (or, because it's imperfect in a scripting language, make it very likely) that this event handler is only really triggered once.

Edit

For More than two Superimposed Divs

You will have to accompany the mutex boolean with a number that counts down. You would do something like this

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

edited Dec 01 '15 at 06:34

answered Dec 01 '15 at 05:47

William Rosenbloom

2,506
1
14
37

thank you @William Rosenbloom , it doing work but like this: if (!mutex) { mutex = true; } else { click_event() ;mutex = false; } – MojtabaSh Dec 01 '15 at 06:05
it working for twice called but i tried to reach one call when 3 or more div is clicked at same time right now – MojtabaSh Dec 01 '15 at 06:06
well i think it can't stop click event for 3 or more time , if you know any way for stop that please say me, absloutly i will accpect your answer, thank you – MojtabaSh Dec 01 '15 at 06:16
excellent, thank you @William Rosenbloom, it will stop them, thanks again – MojtabaSh Dec 01 '15 at 06:41
Haha no problem it was fun. – William Rosenbloom Dec 01 '15 at 06:44
so for n numbers can assign same title to divs and get $('[tiltle="clickme"]').length to count variable – MojtabaSh Dec 01 '15 at 06:49
1

Well you can't actually assign the same title (I assume you mean id) because that's against the rules of HTML. However you can attach a method like this to multiple simultaneous triggers (like superimposed divs), and the method will only execute once. – William Rosenbloom Dec 01 '15 at 06:51

score 1 · Answer 2 · answered Dec 01 '15 at 06:20

1

You can use a line: event.stopPropagation();

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

Here you can see your updated fiddle, which is working fine. http://jsfiddle.net/Leu7vmf6/1/

answered Dec 01 '15 at 06:20

Sunniya Maini

75
1
9

thank you, but it don't show any alert, i need show that for one time – MojtabaSh Dec 01 '15 at 06:26
please pass the event inside the callback method. http://stackoverflow.com/a/33896210/2862142 – Deepanshu Gupta Dec 01 '15 at 11:29

score 0 · Answer 3 · edited Jul 06 '19 at 01:33

Actually it's an issue with Mozilla we have to pass event in argument.

$("#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>

this is not a issue, you have to catch that event then you can handle that, otherwise how will you know on which you are Propagating event. — Deepanshu Gupta, Dec 01 '15 at 12:18

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

3 Answers3

Edit