Jquery disable click event for div

Question

Let's say I got a simple click event for a HTML div. If I click on the div it should trigger a fadeToggle.

In that div I got another div with another trigger. On that click event it should do something but instead of doing the event it triggers the first event.

How do I prevent event 1 from triggering if I want event2 to trigger?

Event1 should trigger only if I don't press the clickevent on the second event everything else should trigger as usual.

Thanks for your time

HTML

<div id="1">
     Event 1
     <div id="2">
         <div id="3">
            but here is something as well event2
          </div>
     </div>
</div>

JavaScript

$("#1").click(function() {
   $(this).slideToggle();
});


$("#3").click(function() {
   $(this).css("background-color", "blue");
});

Fiddle: http://jsfiddle.net/VLcxJ/

kamilkp · Accepted Answer · 2014-02-25 09:13:55Z

2

$("#3").click(function(e) {
    e.stopPropagation();
    $(this).css("background-color", "blue");
});

After that, clicks on #3 won't reach #2 or #1

answered Feb 25, 2014 at 9:13

kamilkp

9,8106 gold badges41 silver badges58 bronze badges

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

1 Comment

AME Over a year ago

Thank you. helped me out, I can accept your answer in 11 minutes.

enguerranws · Accepted Answer · 2014-02-25 09:52:29Z

2

Use event.stopPropagation(); :

$("#e3").click(function(event) {
   event.stopPropagation();
   $(this).css("background-color", "blue");
});

See it working here : http://jsfiddle.net/bYn22/

Note from jQuery API (I couldn't explain it better) : event.stopPropagation() > Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

And note that your IDs can't begin with a number :)

edited Feb 25, 2014 at 9:52

answered Feb 25, 2014 at 9:18

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

1 Comment

Yang Over a year ago

It would be nice if you add an explanation of why he should be using event.stopPropagation(); Now your answer looks as : Add this code and it would work

V31 · Accepted Answer · 2014-02-25 09:19:22Z

0

$("#3").click(function(event) {
   event.stopPropagation();
   $(this).css("background-color", "blue");
});

Added Fiddle: http://jsfiddle.net/VLcxJ/1/

edited Feb 25, 2014 at 9:19

V31

7,6643 gold badges28 silver badges44 bronze badges

answered Feb 25, 2014 at 9:14

Ende Neu

15.8k5 gold badges61 silver badges72 bronze badges

2 Comments

kamilkp Over a year ago

This is basically the same thing that I wrote :)

Ende Neu Over a year ago

Of course, when I submitted the answer yours was no there yet on my browser, didn't meant to steal or anything.

monu · Accepted Answer · 2014-02-25 09:17:06Z

-1

Here is the solution

        $("#1").click(function() {
            $(this).slideToggle();
        });


        $("#3").click(function(event) {
           event.stopPropagation();
            $(this).css("background-color", "blue");
        });

http://jsfiddle.net/tR7h9/3/

answered Feb 25, 2014 at 9:17

monu

3701 silver badge10 bronze badges

Collectives™ on Stack Overflow

Jquery disable click event for div

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related