Seperating overlapping elements events

[bugboy]

Hi I have a <div> with an onclick event, inside the <div> i have an <a> element for text. What i'm trying to do is seperate their events so that when i click the text of the <a> element the parent <div> is not triggered as well, but when i click off of the <a> and on the <div> it is triggered. I think this may be called bubbling but i can't figure out how to control it.

Thanks!

<div  onclick="some_event">
     <a  onclick="some_other_event">
         Clickable text
     </a>
</div>

[acoder]

Use stopPropagation () or cancelBubble=tr ue to cancel it. See Event order.

[bugboy]

Thanks for your help. I'm new at this and after reading the link you've suggested i realize that i am using an old inline event handler way of doing things.. before i get more advanced i really want to understand what i'm doing here.. which i don't. where would i use your suggestions? do i put them in the html event handler with my function inside? or appended after the function call... i'm very confused by js at the moment..

Thanks,
Kind regards,

[acoder]

See Event Propagation Example

[bugboy]

Thanks!
Kind regards,
Bugboy

[acoder]

You're welcome. Remember to add cancelBubble in there for IE.