• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 902
  • Last Modified:

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.
0
phirschybar
Asked:
phirschybar
  • 4
  • 4
  • 3
  • +1
1 Solution
 
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
 
LordWolfyCommented:

It's the outer one he wants to prevent though.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now