Javascript/jQuery Click Element within Element

Question

This is probably something quite easy to resolve, but for some reason, I can't figure it out.

I have the following HTML:

<li onclick="function_1();">
  <input type="checkbox" onclick="function_2();">
  <div onclick="function_3();">
</li>

My issue is: Whenever I click one of the child elements (either the checkbox or div), it also carries out the function from the <li> --> function_1().

How can I prevent the parent element function from being called when child element is being clicked? What is the best way to achieve this?

Thanks for the help!

Gregoire · Accepted Answer · 2010-08-04 17:37:05Z

3

Use the stopPropagation function

answered Aug 4, 2010 at 17:37

Gregoire

24.9k7 gold badges50 silver badges74 bronze badges

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

Comments

Coin_op · Accepted Answer · 2011-06-22 16:07:50Z

0

Alternatively you can just return false from the child elements onclick function.

answered Jun 22, 2011 at 16:07

Coin_op

10.8k4 gold badges38 silver badges47 bronze badges

Collectives™ on Stack Overflow

Javascript/jQuery Click Element within Element

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related