2013-01-06 9 views
6

Ho un problema in cui una riga della tabella ha un evento click, ma quando un utente fa clic su un collegamento in una delle celle della riga della tabella, non desidero che l'evento click della riga venga attivato.Come escludere una voce secondaria dall'evento click di un genitore?

Immaginate un caso in cui una cella di tabella ha un collegamento al suo interno e, in genere, facendo clic sulle aree vuote di una qualsiasi delle righe della tabella (ad esempio non i collegamenti) causa un'azione come una fisarmonica/riga collassa ed espande.

Quello che sta succedendo è che l'evento click di seguito viene attivato, quindi viene seguito il collegamento (l'azione desiderata).

Quello che devo fare è escludere facendo clic su un href all'interno di a dall'attivazione dell'azione click di tritolo (ad esempio l'avviso non deve essere attivato e il collegamento deve essere seguito).

Questo codice jQuery è la creazione di eventi click per la riga del titolo (ad esempio tutti, tutte le cellule del in quella riga TH, etc.)

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

qui è la stessa HTML questo vale per:

<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> 

risposta

5

possono controllare la target della fila clic e solo il codice periodo se destinazione non è un <a> tag:

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

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

semplicemente smettere spumeggiante l'evento alla riga

$(".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 ... per il codice meglio basta usare on invece del nome 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 
}); 
+1

Non c'è differenza tra '.on (' clicca ') 'e' .click() 'per quanto riguarda questa domanda. Vedi [this] (http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click). –

+0

Questo è uno stile di codice errato, poiché qualcuno che legge la parte stopPropagation si chiederà perché è lì. – user2846569

Problemi correlati