Prevent javascript onclick on child element

Question

Ok, simple question:

<div onclick="javascript:manualToggle(this)">
    <span>Allowed to click</span>
    <span>Not allowed to click</span>
    <span>Allowed to click</span>
</div>

Without replicating the manualToggle on to the 2 spans that are allowed to click, how can I prevent the "Not allowed to click" span from firing it's parent div onclick event when it is clicked on?

Answer 1

Give the span an id an attach onclick event to it and use

A jQuery sample

$("#spn2").click(function(event){
  event.stopPropagation();  
});

event.stopPropagation(): Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.