Avoid 'onclick' of parent element when clicking a child link or element

I am fairly knowledgeable in javascript but not sure how to get around this one. I have a <tr> (table row) element which has certain behaviors triggered by an onclick event listener. So,

table_row.onclick = function() { does_stuff(); }

Problem is that within the <td> (table cells) of that table row I have some elements such as buttons, links etc which, when specifically clicked should NOT trigger the onclick for that table row. Is this possible? I am not sure if this is even possible to get around but I wondering if not, what is a potential workaround? Perhaps a way to set a global variable to set a lock and then check for that lock when running the functions triggered by the internal elements??? Sounds like a long-winded approach but I am at a loss.
phirschybarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LordWolfyCommented:

Firing of events is something that can differ alot between browsers (the onchange event in IE is a good example of how this can be a problem).  If you were to set a global variable in the <td> event that was checked by the <tr> event then theres no garuntee it would work in different browsers.

Cant you just remove the onclick from your <tr> and put it in each of the <td>s with your specific one having a different call?

you could also try a css approach and specify z-order for your table elements.  That might work as a way to gaurantee precedence.
0
ZvonkoSystems architectCommented:
You can stop the events in the inner elements to prevent the td event handler.
Like this:
function doSomething(e)
{
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
}

For more details look at this:
http://www.quirksmode.org/js/events_order.html

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LordWolfyCommented:

It's the outer one he wants to prevent though.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

phirschybarAuthor Commented:
"Cant you just remove the onclick from your <tr> and put it in each of the <td>s with your specific one having a different call?"

Not sure how that would help as the <td> is still a parent of the elements that are being clicked.

But, is it possible to remove the event listener from the parent altogether when the child element is clicked (before the onclick of the parent fires)? Then I could restore it (the event listener) after the child element actions run their course...

"You could also try a css approach and specify z-order for your table elements.  That might work as a way to gaurantee precedence."

Really? So, this would just establish precedence though, correct... not avoid the parent's onclick?

0
ZvonkoSystems architectCommented:
"But, is it possible to remove the event listener from the parent altogether when the child element is clicked (before the onclick of the parent fires)? "

That is what my proposal does.

0
ZvonkoSystems architectCommented:
Here again with more details:

function doSomething(e){
  // you are here in the button click and do the button stuff
  // for example to do alert()
     alert(42);

  // the rest of the event handler kills the event chain to prevent the call of parent row event handler:
      if (!e) var e = window.event;
      e.cancelBubble = true;
      if (e.stopPropagation) e.stopPropagation();
}
0
phirschybarAuthor Commented:
@ Zvonko: thanks for the link. You posted your comment while I was writing my response to LordWolfy. I am going to educate myself on this and will post the result. I don't understand your code example at first glance but perhaps reading your link will help.
0
BadotzCommented:
If you have a generic evant handler, then you can interrogate thelement from the 'e' variable:
function_table_click(e)
{
    e = ((e.target) ? e.target : e.srcElement); // FF and IE differences
    
    switch(e.id)
    {
        case 'button_1':
            // do something
            break;
        case 'tr_1':
            // do something else
            break;
        default:
            // do something completely different
    }
}

Open in new window

0
LordWolfyCommented:
"Really? So, this would just establish precedence though, correct... not avoid the parent's onclick?"

In theory, the element at the 'back' of the z-order shouldnt see anything
0
phirschybarAuthor Commented:
@ Zvonko: Your solution is the best. Thanks!
0
ZvonkoSystems architectCommented:
You are welcome.
Can you please close this Question by accepting this comment as answer: http:#20870626

0
phirschybarAuthor Commented:
thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.