Question

I have a table with tr‘s where you can click on.
These tr‘s can contain a‘s.

  <tr id="12" href="/guestbook/edit?id=12">
    <td class="main">
       <strong>Remi</strong>
       <a href="mailto:xxx@xxx">xxx@xxx</a>
    </td>
    <td class="date">05-11-2010 11:34</td>
    <td class="number">ip</td>
  </tr>

This is the jquery code to detect the click on the tr

$('table tr[href]').click(function(e){
   document.location.href = $(this).attr('href');
});

When I click on the e-mail address for example, first my e-mail client opens (which is good) and then the page edit loads (which is bad). Is it possible to detect the element I’ve clicked on? If it’s an A or an TR?

Answer 1

You can check the .target of the event and see what its .nodeName is, like this:

$('table tr[href]').click(function(e){
   if(e.target.nodeName == 'A') return;
   document.location.href = $(this).attr('href');
});

---

As @Hannes says in comments though, it’s better to use at least a data attribute here, like this:

<tr id="12" data-href="/guestbook/edit?id=12">

Then in your code:

$(this).attr('data-href');

Or, in jQuery 1.4.3+:

$(this).data('href');