usando onClick en una fila de la tabla que también tiene enlaces en el mismo

Question

que estoy usando onClick en filas de la tabla de la siguiente manera:

<tr onmouseover="this.style.cursor='pointer'" onclick="http://www.whatever.com/index.php?var={$foo1}"> 

También tienen algunas necesidades para poner un enlace en ciertas áreas en esta fila de la tabla, es decir

<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td><a href="specialLink.php?var={$foo2}">Here</a></td> 
<td>Stuff Here</td> 

el problema es, el "eslabón interior" (specialLink.php) no se puede hacer clic, porque el enlace fila tiene prioridad. ¿Tengo alguna opción aquí?

Gracias

Answer 1

Haré lo que:

<script type="text/javascript"> 
var link=true; 
</script> 

<tr onmouseover="this.style.cursor='pointer'" onclick="if (link) window.location ='http://www.whatever.com'"> 

<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td>Stuff Here</td> 
<td onmouseover="link=false;" onmouseout="link=true;"><a href="specialLink.php">Here</a></td> 
<td>Stuff Here</td> 

Answer 2

También puede hacer esto (y esto utiliza jQuery):

$("td") 
    .click(function(e){ 
     var tag = e.target.nodeName; 
     if(tag === 'A'){ 
      // link was clicked 
     } else { 
      // normal td was clicked 
     } 
    }); 

Example.

Esto reemplaza la necesidad de usar Javascript en línea.

Answer 3

Intente poner un id en la celda de la tabla y use jQuery para manejar el evento click. Por ejemplo ...

<tr id="row1"> 
    <td id="cell1" class="table_cell">etc</td> 
    <td id="cell2" class="table_cell">etc</td> 
</tr> 

Su código de jQuery puede la trampa cada clic a través de la clase de la celda de la tabla de la siguiente manera ...

$(".table_cell").click(function(){ 
    // Activated by a click on any table cell with the class "table_cell" 
    var cell_id = $(this).attr("id"); // Loads id of td element clicked on 
    // Insert code that deals with a click on that specific table cell here... 
}); 

Incluso podría intentar poner la URL en una etiqueta del título, recuperar de la misma manera que recupero el ID anterior, eliminando así un montón de javascript desordenado y código if/then.

Usando jQuery's .hover() también puede reemplazar onmouseover y onmouseout out con una sola función jQuery. Esto da como resultado un código que es más corto, más limpio y puede colocarse en un archivo .js externo para facilitar su uso en cualquier página que lo necesite.

Answer 4

De hecho, pondría un evento en toda la mesa, no en cada fila. Especialmente si tienes cientos. Así que ...

<table id="links" style="cursor: pointer;"> 
    <tr data-var="{$foo1}"> 
     <td><a href="http://example.com/">Link</a></td> 
     <td>Another cell</td> 
    </tr> 
</table> 
<script type="text/javascript"> 
    document.getElementById('links').onclick = function(e) { 
     e = e || window.event; 
     var t = e.srcElement || e.target; 
     if(!t.tagName) t = t.parentNode; // some browsers treat text nodes as potential targets 
     while(t != this) { 
      if(t.tagName == "A") break; 
      if(t.getAttribute("data-var")) 
       location.href = "http://example.com/index.php?var="+t.getAttribute("data-var"); 
     } 
    }; 
</script> 

Este método no contamina el ámbito global, y utiliza un solo evento que siempre es más eficiente que una por fila.

Answer 5

Puede usar stopImmediatePropagation() para eludir eventos consecutivos/entrantes.

ejemplo corto:

<tr onclick="alert('tr event')"> 
    <td>tr event</td> 
    <td onclick="alert('td');event.stopImmediatePropagation();">NO tr event</td> 
</tr> 

Prueba esto en jsFiddle: http://jsfiddle.net/g8Anh/6/

Answer 6

en el elemento td rodea su enlace puso el siguiente attr:

<td onclick="event.cancelBubble=true;">your link with event</td> 

Ésta es la forma en que resolvemos para IE en mi trabajo