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

bm · 29/03/2014, 14h33

Effacer / Afficher une table :

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

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

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();
  });
});

**NoSmoking** · 29/03/2014, 15h21

Bonjour,

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

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

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');
  });
});