Stop button clicks?

Question

I have two methods

$('.btn-delete').click(function(){

        //do A
        //return false?
    });

$('.btn-delete').click(function(){

        //do B
    });

How can I stop 'B' from happening when A returns false?

As long as you bind them in that exact order, you can use `e.stopImmediatePropagation()` right before the `return false`, as long as you include the parameter `e` (as the event). Reference: http://api.jquery.com/event.stopimmediatepropagation/ — Ian, Mar 06 '14 at 16:30
This answer provides a better solution - http://stackoverflow.com/a/1491784/903056 — EkoostikMartin, Mar 06 '14 at 16:33
Any reason why you have two handlers? And can't be combined? — Ian, Mar 06 '14 at 16:39

score 2 · Answer 1 · answered Mar 06 '14 at 16:32

var whatDoesAReturn = false;
$('.btn-delete').click(function(){
    if (something) {
        whatDoesAReturn = true;
        return true;
    } else {
        whatDoesAReturn = false;
        return false;
    }
});

$('.btn-delete').click(function(){
    if (!whatDoesAReturn) {
        // Do whatever
    }
});

score 2 · Answer 2 · answered Mar 06 '14 at 16:33

2

Use the jquery event's stopImmediatePropagation. That's exactly what it's for:

$('.btn-delete').click(function(e){

        //do A
        if (a is returning false) 
          e.stopImmediatePropagation();
    });

$('.btn-delete').click(function(){

        //do B
    });

answered Mar 06 '14 at 16:33

Rui

4,847
3
29
35

I personally don't prefer this approach. 6 months down the line when you come back its a little difficult to understand whats going on.. – Lucky Soni Mar 06 '14 at 16:38
@LuckySoni Then put a comment in saying "don't allow other handlers to execute". Can't you look up what `stopImmediatePropagation()` does? That would be pretty self-explanatory – Ian Mar 06 '14 at 16:39
@Ian Yes, right but still this is somewhat restrictive. What if i plan to add more handlers later down the road.. should i go back and change the code again? It will take time to figure why my other handlers are not working.. If its a small project then this might work well otherwise i dont think its a good solution. – Lucky Soni Mar 06 '14 at 16:41

score 2 · Answer 3 · answered Mar 06 '14 at 16:41

2

Why not to put altogether?

$('.btn-delete').click(function(){

    //do A
    // if true do B
});

answered Mar 06 '14 at 16:41

Sergey Yarotskiy

517
4
14

Adil · Answer 4 · 2014-03-06T19:08:16.733

1

You better make a single function and put condition to handle if that is not the solution you can set a flag in first event.

Using single event handler

$('.btn-delete').click(function(){

    //do A
    if(condition != false)
        execute code of second event.
    //return false?

});

Using flag

flag = true;
$('.btn-delete').click(function(){    
        //do A
        if (something) {
           flag = true;
        else
           flag = false;
    return flag;  
 });

$('.btn-delete').click(function(){
        if(!flag) return;
        //do B
});

edited Mar 06 '14 at 19:08

answered Mar 06 '14 at 16:31

Adil

146,340
25
209
204

1

In second case don't forget to set flag to true again in second function to prepare page for next iteration. Button can be clicked several times! – Sergey Yarotskiy Mar 06 '14 at 19:02

score 0 · Answer 5 · answered Mar 06 '14 at 16:48

_{(Just in case anyone wants a non-jQuery solution).}

This can't be done directly in plain JavaScript, because you can't be sure in which order the event listeners will be triggered.

According to the spec,

Although all EventListeners on the EventTarget are guaranteed to be triggered by any event which is received by that EventTarget, no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget.

Then, one possibility is joining all handlers inside only one function.

But if that's not possible, you could use event delegation to a wrapper, and stop propagation if necessary:

<div class="btn-wrapper"><button class="btn-delete">Delete</button></div>

var btn = document.querySelector('.btn-delete');
btn.addEventListener('click', function(e){
    // do A
    if(cond) e.stopPropagation();
}, false);
btn.parentNode.addEventListener('click', function(e){  
    //do B
}, false);

Stop button clicks?

5 Answers5