onclick sur td se déclenche deux fois

**Dark Ryus** · 03/11/2014, 16h08

bonjour,

voila un bout de code tout simple :

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
<div id="test" onclick="$('#txtid').val($('#txtid').val() + 'test/');">
    <table>
        <tr class="montr">
            <td class="montd" id="tdid" onclick="$('#txtid').val($('#txtid').val() + 'toto/');">toto</td>
        </tr>
        <tr>
            <td>titi</td>
        </tr>
        <tr>
            <td>tutu</td>
        </tr>
    </table>
</div>
<input id="txtid" />

Si je passe le script $("#tdid").click(), le résultat sera dans mon input toto/test/test/.

Le onclick de la DIV se déclenche 2 fois, pourquoi ?

j'utilise la version 1.9.0 de jquery. J'ai essayé avec une 1.6.0, c'est le même effet.

Merci d'avance

**Watilin** · 03/11/2014, 19h43

Je n'irais pas jusqu'à dire que c'est un bug de jQuery, mais c'est bizarre.

En tout cas j'ai testé avec du code JS pur (voir MouseEvent) et le problème ne se produit pas.

Code :

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

1
2
3
4
5
6
var click = new MouseEvent("click", {
  canBubble: true,
  cancelable: true,
  view: window,
});
document.getElementById("tdid").dispatchEvent(click);

Et ça ne se produit pas avec jQuery quand tu remplaces les attributs onclick par des $("...").click(...).

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
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang=fr>
<head>
  <meta charset=utf-8>
  <title>Bouillonnement bizarre avec jQuery</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script> 'use strict';
  
  $(document).ready(function() {
  
    $("#test").click(function() {
      $('#txtid').val($('#txtid').val() + 'test/');
    });
    
    $("#tdid").click(function() {
      $('#txtid').val($('#txtid').val() + 'toto/');
    });
    
  });
  
  </script>
</head>
<body>
 
<!-- <div id="test" onclick="$('#txtid').val($('#txtid').val() + 'test/');"> -->
<div id="test">
    <table>
        <tr class="montr">
            <!-- <td class="montd" id="tdid" onclick="$('#txtid').val($('#txtid').val() + 'toto/');">toto</td> -->
            <td class="montd" id="tdid">toto</td>
        </tr>
        <tr>
            <td>titi</td>
        </tr>
        <tr>
            <td>tutu</td>
        </tr>
    </table>
</div>
<input id="txtid" />
 
</body>
</html>

**freddou17** · 04/11/2014, 09h18

Slt,
je pense que l'evt onclick est intercepté sur ta div vu que ta div englobe ton table (regarde du coté de la propagation des evts en js)...
A quoi sert le onclick de ta div??

++

**SpaceFrog** · 04/11/2014, 10h14

Code :

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

1
2
3
4
$( "td" ).click(function( e ) {
e.stopPropagation();
 
});

**Dark Ryus** · 04/11/2014, 10h25

Justement je veux que les 2 événements se déclenchent, pas seulement le TD.

Mon problème c'est que le onclick de la DIV se déclenche 2 fois au lieux d'une seule.

Je ne peux pas utiliser le ready() avec l'événement click() dans le bout de code sur lequel je travail.

J'ai posté aussi sur le forum de JQuery en espérant avoir une explication.

Je vais continuer à réfléchir à une autre solution et je vais étudier vos propositions.

**SpaceFrog** · 04/11/2014, 11h40

je n'ai a priori pas de double click sur le div ...
http://jsfiddle.net/fh67605y/
ton souci doit provenir d'un autre bout de code ?

onclick sur td se déclenche deux fois

jQuery

Vue hybride

Discussions similaires

Partager

Partager