How to prevent a click from triggering multiple click handler calls in jQuery

Question

I am using jQuery for a list and a div element click. HTML code is-

<ul class="list-group">
    <li class="list-group-item">
        <div>
            <div>
                Anything <img id="image_click" src="http://www.neatimage.com/im/lin_logo.gif">
            </div>
            <div>
                More thing
            </div>
        </div>
    </li>
    <li class="list-group-item">Documents</li>        
    <li class="list-group-item">Music</li>
    <li class="list-group-item">Videos</li>
</ul>

And jQuery code is-

$( document ).ready(function()
{
    $(".list-group-item").click(function()
    {
        alert($("For list");
    });

    $("#image_click").click(function()
    {
        alert("for image");
    });
});

When I click on a li item, only For list is alerted. But if I clicked on image, then for image and after that For list is alerted.

What I want is if anyone click on li element, For list should be alerted, but if he clicks on the image, only for image should be alerted, for list should not be alerted.

Here is Fiddle Link jsfiddle.net/kcL8e3d0

Shivam Pandya
– Shivam Pandya

2015-02-04 06:43:26 +00:00
Commented Feb 4, 2015 at 6:43 — Shivam Pandya
– Shivam Pandya, Commented Feb 4, 2015 at 6:43

Arun P Johny · Accepted Answer · 2015-02-04 06:36:52Z

4

It is because of event bubbling, so you stop it by calling Event.stopPropagation()

$("#image_click").click(function (e) {
    e.stopPropagation();
    alert("for image");
});

answered Feb 4, 2015 at 6:36

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

crazymatt Over a year ago

Isn't stopping propagation not a good idea to do? Shouldn't there be a better way to handle this? css-tricks.com/dangers-stopping-event-propagation

Arun P Johny Over a year ago

@crazymatt you can always check whether the click happened in a particular element and then choose not to do anything

Arun P Johny Over a year ago

@crazymatt something like - jsfiddle.net/arunpjohny/gyr6g1p1/1 - or more generalized jsfiddle.net/arunpjohny/gyr6g1p1/2

Balachandran · Accepted Answer · 2015-02-04 06:36:55Z

1

use stopPropagation(); : to stop bubbling event

 $("#image_click").click(function(e)
    {
       e.stopPropagation();
        alert("for image");
    });

answered Feb 4, 2015 at 6:36

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Comments

Sadikhasan · Accepted Answer · 2015-02-04 06:52:40Z

0

If you do not want any action from any action that simply write return false. which will prevent from multiple triggering your function code.

 $(".list-group-item").click(function(){
       return false;
    });

$("#image_click").click(function(){
     alert("for image");
});

answered Feb 4, 2015 at 6:52

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

1 Comment

Sadikhasan Over a year ago

Read this article philipwalton.com/articles/…

banana_Ai · Accepted Answer · 2015-02-04 06:53:12Z

0

Or you can try this code:

$(".list-group-item").click(function (e) {
    if(this==e.target)
         alert("for list");
});

I think this question may help you.

edited Feb 4, 2015 at 6:53

answered Feb 4, 2015 at 6:41

banana_Ai

543 bronze badges

Collectives™ on Stack Overflow

How to prevent a click from triggering multiple click handler calls in jQuery

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related