select child element without selecting parent element

Question

We are doing logging, we have a header of the website where we are logging anytime it is clicked. We have elements within the element that need logging as well. Is there a way to only log the child elements when clicked within the header by using jquery .not() function or anything?

Here is the working jsfiddle

HTML

<div id="header">
    <div><a class="box blue" href="#">Blue</a></div>
    <div><a class="box red" href="#">Red</a></div>
    <div><a class="box green" href="#">Green</a></div>
</div>

CSS

$('#header').on('click', function() 
    alert('header')
});
$('.box').on('click', function() {
    alert($(this).attr('class'));
});

I want the child elements logged, but not the `#header` logged as well. When a child element is clicked both get logged currently — Jon Harding, Sep 26 '14 at 14:42
possible duplicate of [jquery stop child triggering parent event](http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event) — emerson.marini, Sep 26 '14 at 14:42
Then your scenario is the easiest to fix. Just use `.stopPropagation()`. — emerson.marini, Sep 26 '14 at 14:43

score 4 · Accepted Answer · answered Sep 26 '14 at 14:43

You can use jQuery's .stopPropagation() function to stop the bubbling from the children to the parent:

$('#header').on('click', function() {
    alert('header');
});
$('.box').on('click', function(e) {
    e.stopPropagation();
    alert($(this).attr('class'));
});

#header { padding:20px; background:yellow; overflow:auto; }
    .box { width:50px; height:50px; float:left; margin:0 20px 0 0; }
    .blue { background:blue; }
    .red { background:red; }
    .green { background:green; }
 a { color:white; display:block; text-align:center; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
 <div><a class="box blue" href="#">Blue</a></div>
    <div><a class="box red" href="#">Red</a></div>
    <div><a class="box green" href="#">Green</a></div>
</div>

score 2 · Answer 2 · answered Sep 26 '14 at 14:46

2

e.stoppropagation is one way to stop the bubbling up from the child element . other than that you can simply check if the current target element is the one that is clicked.

$('#header').on('click', function(e) {
 if(e.target == this){
    alert('header');
 }
});

fiddle

answered Sep 26 '14 at 14:46

bipen

36,319
9
49
62

Checking target is better because it stop this particular event not all other event like Stoppropagation. – Kinga Sep 26 '14 at 15:13

score 1 · Answer 3 · answered Sep 26 '14 at 14:43

1

e.stoppropagation

$('#header').on('click', function() 
    alert('header')
});
$('.box').on('click', function(e) {
    e.stoppropagation();
    alert($(this).attr('class'));
});

http://api.jquery.com/event.stoppropagation/

answered Sep 26 '14 at 14:43

SpYk3HH

22,272
11
70
81

select child element without selecting parent element

3 Answers3