Prevent one jQuery Event with another

Question

In order to tidy up my jQuery, I am looking to create a "confirm" class for various elements with event handlers so I can fire off a quick confirmation box so the user can confirm their action.

If the user clicks cancel on the confirmation box, any following events should be cancelled, but this should not be permanent, eg triggering the event again should bring up the confirmation and start again. If I can work this out I can make any sensitive action have a confirmation question to make sure the user meant to click.

For example:

$('.confirm').click(function() {
    if(!confirm('Are you sure?')) {
        // Stop any other click events on $(this) from happening this instance.
    }
});

$('.clicker').click(function() {
    alert('it happened');
});

<a class="clicker confirm">Click me</a>

Desired output would be that cancelling the confirmation would cancel the click event, but not totally disable it.

mekwall · Accepted Answer · 2011-06-09 11:48:06Z

5

You can use event.stopImmediatePropagation() from jQuery:

$('.confirm').click(function(event) {
    if(!confirm('Are you sure?')) {
        event.stopImmediatePropagation();

        // Stop any other click events on $(this) from happening this instance.
    }
});

$('.clicker').click(function() {
    alert('it happened');
});

Look at test case on jsFiddle

edited Jun 9, 2011 at 11:48

mekwall

29.1k6 gold badges78 silver badges77 bronze badges

answered Jun 9, 2011 at 11:37

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mekwall Over a year ago

Thanks! This is what I intended to do. Messed up TWICE in my answer so decided to delete it instead ;) thanks for refreshing my mind!

Dunhamzzz Over a year ago

I'd like to add, in the case of forms, event.preventDefault() is also required to stop the form from firing when you deny the confirmation.

Vivek · Accepted Answer · 2011-06-09 11:49:18Z

0

$('.confirm').click(function() {     
return confirm('Are you sure?');
});

you can also use event.stopPropagation() in side your click event to stop furthure propagation.

edited Jun 9, 2011 at 11:49

answered Jun 9, 2011 at 11:35

Vivek

11k15 gold badges51 silver badges68 bronze badges

2 Comments

Dunhamzzz Over a year ago

I found that return false didn't stop other click events from being triggered.

mekwall Over a year ago

Sadly, .disablePropagation() doesn't exist. It was my bad, and it should be .stopPropagation(), which doesn't work either. Nicola presented the correct solution!

Collectives™ on Stack Overflow

Prevent one jQuery Event with another

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related