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: /

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/VLcxJ/

• javascript
• jquery

4 Answers 4

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

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

Use event.stopPropagation(); :

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

See it working here : http://jsfiddle/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 :)

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

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

Here is the solution

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


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

http://jsfiddle/tR7h9/3/