How can call the jquery function onclick only parent element

Question

I am trying to call a jQuery function when clicked only on parent element.

<div id="clcbox" class="click-img">
    <img id="fire" onclick="createFirework()" src="img/clicker.png" />
</div>

I have an img tag inside a div. When I click on the div it should call one function and when I click on the img I want to call another function. How can I do this?

$('.click-img, .wishes').click(function () {
    $('.flipWrapper').find('.card').toggleClass('flipped');
    return false;
});

When I click the div I should call the above function. However now when I click on the image, it is also calling this function and createFirework().

score 1 · Accepted Answer · answered Nov 03 '15 at 10:01

The issue is due to event bubbling. If you attach your events in an unobtrusive manner you can easily stop this behaviour.

<div id="clcbox" class="click-img">
    <img id="fire" src="img/clicker.png" />
</div>

$('#fire').click(function(e) {
    e.stopPropagation();
    createFirework();
});

$('.click-img, .wishes').click(function (e) {
    $('.flipWrapper').find('.card').toggleClass('flipped');
    e.preventDefault();
});

score 0 · Answer 2 · answered Nov 03 '15 at 10:01

First off, don't mix inline (onclick) event handlers and jQuery event handlers. Once, you've got a jQuery event handler in place of your createFirework method, you simply stopPropagation to stop it calling the handler on the outer div.

Below is an example

$('.outer').click(function(e){
   alert("You clicked text in the div");  
});

$('.inner').click(function(e){
   alert("You clicked the button, but the div event handler will not fire");  
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span>here is some text inside the div, click it</span>
  <button class="inner">Click me</button>
 </div>

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

You can use Event.stopPropagation(), to stop the click event bubble to its parents, but you also need to add a param event, so your function can access it without browser issue.

//                                     VVVV pass `event` as createFirework's param.
<img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />

But I'd suggest that answers that separate js part and html part would be better. Just like Jamiec's.

function createFirework(event) {
  console.log('inner');
  event.stopPropagation();
}

$('.click-img, .wishes').click(function () {
    console.log('outer');
    return false;
});

#clcbox {
  width: 100px;
  height: 100px;
  border: solid 1px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clcbox" class="click-img">
    <img id="fire" onclick="createFirework(event)" src="http://placehold.it/50x50" />
</div>

edited May 23 '17 at 12:03

Community

1
1

answered Nov 03 '15 at 10:01

fuyushimoya

9,715
3
27
34

@Jamiec I passed in the event at markup, it seems to work on firefox. But I agree that js and markup should be separated, as your answer. – fuyushimoya Nov 03 '15 at 10:05
Ah yes, it does work like that. often people make the mistake of not passing `event` in from the markup - on IE & Chrome `event` is global and accessible without specifically passing it in. – Jamiec Nov 03 '15 at 10:06
I dont think you should delete it - its a good answer and may help someone in future. – Jamiec Nov 03 '15 at 10:09
Thanks for that comment, and always welcome for any comments that would correct my knowledge. – fuyushimoya Nov 03 '15 at 10:10

score 0 · Answer 4 · answered Nov 03 '15 at 10:02

You need to use stopPropagation function: http://www.w3schools.com/jquery/event_stoppropagation.asp

In your case you need to add this on image click event:

$('.click-img, .wishes').click(function (event) {
    event.stopPropagation();
    $('.flipWrapper').find('.card').toggleClass('flipped');
    return false;
});

score 0 · Answer 5 · answered Nov 03 '15 at 10:03

It looks like you need to stop the click event from the image bubbling up the DOM chain.

$('.click-img, .wishes').click(function (e) {
    $('.flipWrapper').find('.card').toggleClass('flipped');
    e.stopPropagation();
});

When you click on the image, that event is passed up to it's parent, in this case the <div>. That is by behavior. To stop that from ocurring, you call the stopPropagation() function that is part of the incoming event argument for the click event.

How can call the jquery function onclick only parent element

5 Answers5