jQuery ignoring child elements events

Question

I have the following list:

  <ul id="menu">
            <li style="background-image:url('Images/X-AFH-Company-Office-Background.png')" id="office">
                <!-- <div style="width:250px;height:300px;position:absolute;" ></div>-->
                <div >Company / Office</div>
                <img src="Images/Employee.png"  onmouseover="this.src='Images/Employee-Stroke.png'" onmouseout="this.src='Images/Employee.png'" />
                <img class="stroke" style="display:none"  src="Images/Employee-Stroke.png" />
            </li>
            <li  style="background-image:url('Images/X-AFH-Hospital-Clinic-Background.png')" id="clinic" >
                <div >Hospital / Clinic</div>
                <img src="Images/Doctor.png"  onmouseover="this.src='Images/Doctor-Stroke.png'" onmouseout="this.src='Images/Doctor.png'" />
               <div style="width:100px;height:350px;position:absolute;left:0;top:0;z-index:21"></div>
                                </li>
            <li style="background-image:url('Images/X-AFH-University-School-Background.png')" id="school">
                 <div >University / School</div>
                <img src="Images/Student.png"  onmouseover="this.src='Images/Student-Stroke.png'" onmouseout="this.src='Images/Student.png'" />

            </li>
etc...

And have a click event on the main <li> on that list. However, the <img /> tags are overflowing from their parent <li>s and are triggering the click event.

How can I only restrict the click event for the list item rather than their children? Even if they are going beyond the width and height of the main li.

possible duplicate of [Prevent execution of parent event handler](http://stackoverflow.com/questions/1398582/prevent-execution-of-parent-event-handler) — Felix Kling, Jun 04 '13 at 09:33

dsgriffin · Answer 1 · 2013-06-04T09:41:07.093

You could use stopPropagation() on the child elements to stop it triggering.

Here's an example restricting all images which are children of list elements from triggering an alert:

$("li").click(function(e) {
   alert("Clicking on the li will trigger this, not the img children");
});

$("li img").click(function(e) {
   e.stopPropagation(); // The img children inside li will not trigger the li event.
});

jsFiddle example.

score 1 · Answer 2 · answered Jun 04 '13 at 09:30

As an alternative to the existing answer, you can simply compare the event.target against this (the element the click handler is bound to):

$('li').on('click', function(e) {
   if (e.target === this) {
     // code is only executed when li is clicked
   }
});

Here's a simple demo fiddle

score 1 · Answer 3 · answered Jun 04 '13 at 09:35

1

This is due to Event Capturing and bubbling in javascript. You can find more details in the link provided.

You can prevent this using event.stopPropagation.

answered Jun 04 '13 at 09:35

Praveen

55,303
33
133
164

@Zenith I also came across the same problem in `javascript`. I just missed the link that took a lot of time for me. I tried to explain the cause with a solution. If this is wrong, please excuse me. – Praveen Jun 04 '13 at 09:47

jQuery ignoring child elements events

3 Answers3

Here's a simple demo fiddle