Wie ein Unterpunkt aus einem Eltern Click-Ereignisse auszuschließen?

Question

ich ein Problem habe, wo eine Tabellenzeile ein Click-Ereignis, aber wenn ein Benutzer auf einen Link in einer der Zellen des Tabellenzeile klickt will ich nicht das Ereignis Click der Reihe zu schießen.

Stellen Sie sich einen Fall vor, in dem eine Tabellenzelle einen Link enthält und normalerweise auf die leeren Bereiche einer der Tabellenzeilen klickt (z. B. keine Links), was zu einem Zusammenbruch von Akkordeons und Zeilen führt.

Was auftritt, ist, dass das Click-Ereignis unten feuert dann wird die Verknüpfung gefolgt (die beabsichtigte Aktion).

Was ich tun muss, ist das Ausschließen des Klickens auf die a hrefs innerhalb eines vom Triggern der tr.title-row Klickaktion (z. B. sollte die Warnung nicht ausgelöst werden und der Link sollte befolgt werden).

Dieser Code jQuery einrichtet Click-Ereignisse für die Titelzeile (zB alle in dieser Zeile der TH, alle Zellen, usw.)

$(document).ready(function() { 
$(".report tr.title-row").click(function() { 
    alert('I am firing!'); 
}); 

Hier ist die gleiche HTML dies gilt:

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="report"> 
    <tbody> 
    <tr class="title-row"> 
     <th width="340"><span class="title">Test</span> 
     </th> 
     <th width="130" class="center-cell">Test</th> 
     <th width="90" class="status"></th> 
     <th></th> 
     <th width="160"> <a target="_self" href="http://www.google.com" class="link-class sub-class">I am triggering the TR click event</a> 
     </th> 
    </tr> 
    <tr> 
     <td class="sub-row" colspan="5"> 
     <table width="100%" cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
      <tr> 
       <td><strong>SubRow</strong> 
       </td> 
       <td width="90" class="status"><span class="sub">Sub</span> 
       </td> 
       <td width="120"></td> 
       <td width="160"><a title="Continue" href="http://www.yahoo.com">Something</a> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

Kann die target der Zeile klicken und nur Laufcode überprüfen, ob Ziel kein <a> Tag ist:

$(".report tr.title-row").click(function(event) { 

    if(! $(event.target).is('a')){ 
     alert('I only fire when A not clicked!'); 
    } 
}); 

Answer 2

halten nur das Ereignis an die Reihe sprudelnden

$(".report tr.title-row").click(function() { 
    alert('I am firing!'); 
}); 

$(".report tr.title-row a").click(function(ev){ 
    // link clicked 
    // so something 

    ev.stopPropagation(); // stop triggering the event to the table row 
}); 

btw ... für eine bessere Code nurverwendenstatt des genannten Eventhandler

$(".report tr.title-row").on('click', function() { 
    alert('I am firing!'); 
}); 

$(".report tr.title-row a").('click', function(ev){ 
    // link clicked 
    // so something 

    ev.stopPropagation(); // stop triggering the event to the table row 
});