Supprimer la propagation d'événement sur élément

Invité · 29/03/2014, 12h03

bonjour,

j'aurais besoin de votre aide, car je bloque sur un soucis.
j'ai un tableau avec une span dans chaque cellule.
je cherche a exécuter un code quand je clique dans une case, mais un différent, si je clique dans la span.

le code s'exécute bien quand je clique sur la span, mais les celui de la case aussi.

quelqu'un peut-il m'aider sur le pb ?
voici mon code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Titre</title>
  <style type="text/css">
    td{position: relative;display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;border: solid 1px #000;}
    td span{display: none;}
    td:hover span{display: inline-block;line-height: 15px;position: absolute;top: 0;left: 0; }
  </style>
</head>
<body>
  <h1>Essai</h1>
  <table>
    <tr><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td></tr>
    <tr><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td></tr>
    <tr><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td></tr>
    <tr><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td><td>-<span>O</span></td></tr>
  </table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(function(){
    $('td:not(span)').click(function(event){
      console.log('td');
    });
    $('td span').click(function(event){
      console.log('span');
    });
});

merci d'avance.

Ben

Supprimer la propagation d'événement sur élément

jQuery

Mode arborescent

Discussions similaires

Partager

Partager