jquery, prevent onclick = window.location sur l'élément parent

Question

J'ai une table avec des données telles que celle-ci:

<table>
 <tr onclick="window.location='download.php?id=1'">
  <td>Program 1<br/>Short Description 1 (<a onclick="$.popup.show('Install Instructions', 'Instructions pulled from DB here')">Instructions</a>)</td>
  <td>Added by user and date/time here<td>
  <td>Filesize here<td>
  <td><a href="edit.php?id=1">Edit</a> - <a href="delete.php?id=1">Delete</a><td>
 </tr>
 (repeat TRs for more programs pulled from DB)
</table>

Le problème que je rencontre est que lorsque vous cliquez sur le lien (Instructions), une fenêtre contenant les instructions s’affiche. Il le fait, mais il déclenche également le déclic de TR. Donc, je reçois le popup pour une fraction de seconde, puis il va à download.php.

Y a-t-il un moyen de l'empêcher de tirer sur le TR? Utilisez de préférence jquery, mais les solutions javascript simples ne me dérangent pas non plus.

Answer 1

En gros, vous devez arrêter la la propagation d'événements à l'aide de event.cancelBubble ( pour IE) ou event.stopPropagation () (pour tout le monde). La solution fournie par quirksmode (que j'ai déjà utilisée auparavant) doit être remplie. quelque chose comme ceci:

<script type="text/javascript">
var instructions = function(e) {
    // Get the correct event in a cross-browser manner, then stop bubbling/propagation.
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

    // Do what you want now
    $.popup.show('Install Instructions', 'Instructions pulled from DB here');
}
</script>

Ensuite, votre script l'appellera:

<td>Program 1<br/>Short Description 1 (<a onclick="instructions(event)">Instructions</a>)</td>

(Bien sûr, vous pouvez tout mettre en ligne, mais c'est un foutu bordel.)

Vous pouvez également trouver cette question éclairante .

Answer 2

stopPropogation est celui que vous voulez.

http://docs.jquery.com/Events/jQuery .Event # event.stopPropagation.28.29

Answer 3

Vous pouvez écrire

onclick="false"

et ajoutez des événements à l'aide du modèle d'événement de niveau 2 (attachEvent dans ie ou addEventListener dans d'autres navigateurs). Vous pouvez également jquery bind ('cliquer') si vous utilisez jquery.