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

Version imprimable

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:

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:

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

Effacer / Afficher une table :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
   <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
  <h1>Essai</h1>
  <table>
    <tr><td><span>1</span></td><td><span>-6</span></td><td><span>15</span></td><td><span>8</span></td></tr>
    <tr><td><span>+2</span></td><td><span>+6</span></td><td><span>-2</span></td><td><span>-2</span></td></tr>
    <tr><td><span>+4</span></td><td><span>+O</span></td><td><span>-8</span></td><td><span>+..</span></td></tr>
    <tr><td><span>=7</span></td><td><span>=O</span></td><td><span>=5</span></td><td><span>=25</span></td></tr>
  </table>
<br>
<button id="hide">Efface</button>
<button id="show">Affiche</button>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
  $("#hide").click(function(){
    $("table").show();
    $("span").hide();
  });
  $("#show").click(function(){
    $("table").show();
    $("span").show();
  });
});

Bonjour,

Citation:

Envoyé par bm

Effacer / Afficher une table :

pas sûr que cela soit le problème soumis par benoit1024.

Le soucis semble plutôt d'être de stopper la propagation de l'événement via la méthode stopPropagation()

exemple complet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre</title>
<style>
div{
  width:15em;
  height:15em;
  background:#EEF;
  padding:2em;
}
span{
  padding:0.5em;
  border:1px solid blue;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $('div').on('click', function(e){
    e.stopPropagation();
    alert(' click on DIV!');
  });
  $('span').on('click',function( e){
    e.stopPropagation();
    alert(' click on SPAN');
  });
});
 </script>
</head>
<body>
<div>
  <span>LE texte du SPAN</span>
</div>

et le javascript

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
  $('div').on('click', function(e){
    e.stopPropagation();
    alert(' click on DIV!');
  });
  $('span').on('click',function( e){
    e.stopPropagation();
    alert(' click on SPAN');
  });
});

29/03/2014, 16h00
Invité

Citation:

Envoyé par NoSmoking

Le soucis semble plutôt d'être de stopper la propagation de l'événement via la méthode stopPropagation()

super, je te remercie, c'est exactement celà :D
merci beaucoup de votre aide !!

Ben