mouseout sur un tr

**piotrr** · 11/03/2009, 17h54

Essayez ce code :

Code :

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
 
    $(document).ready( function(){
 
        $("tr").live( "mouseout", function(){
            alert('out');
        });
    });
 
  </script>
 
    <table>
        <tr>
            <td>col 1
            <div><br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/></div></td>
            <td>col 2<div><br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/></div></td>        
        </tr>
        <tr>
            <td>col 3<div><br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/></div></td>
            <td>col 4<div><br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/></div></td>
        </tr>
</table>

Vous verrez que l'évènement sur un mouseout d'un "tr" ne se déclenche pas seulement quand on quitte la zone du tr. Il se déclenche même à l'intérieur d'un td ...

Une explication ?

**danielhagnoul** · 12/03/2009, 00h46

Bonsoir.

Réponse : ne pas oublier le return false !

Remarque : le tr n'a pas d'existence hors le(s) td qu'il contient. Mettre un événement sur le tr me semble donc étrange.

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
        #resultat {
            float:right;
            width:150px;
            height:200px;
            border:1px solid black;
            padding:6px;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            var i = 0;
 
            $("tr").live("mouseout", function(){
                if (i > 4) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>tr mouseout event !");
                return false;
            });
 
            $("td").live("mouseout", function(){
                if (i > 4) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>td mouseout event !");
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="resultat"></div>
    <table cellpadding="6" cellspacing="6" border="1" >
        <tr>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>        
        </tr>
        <tr>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

**danielhagnoul** · 12/03/2009, 00h59

Bonsoir.

Il y a une différence de comportement entre IE7 et Firefox 3.0.7, ce dernier détecte (avec return false sur td et tr) parfois les événements tr alors que IE7 semble ne jamais détecter les tr.

**danielhagnoul** · 12/03/2009, 01h22

Bonsoir.

Je confirme, seul Firefox détecte le tr !

Mais seulement lorqu'on se déplace horizontalement d'un td à l'autre et lorsque la table à un cellspacing > 0.

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
        #resultat {
            float:right;
            width:150px;
            height:600px;
            border:1px solid black;
            padding:6px;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            var i = 0;
 
            $("tr").live("mouseout", function(){
                if (i > 20) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>tr mouseout event !");
                return false;
            });
 
            $("td").live("mouseout", function(){
                if (i > 20) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>td mouseout event !");
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="resultat"></div>
    <table cellpadding="0" cellspacing="40" border="1" >
        <tr>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>        
        </tr>
        <tr>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>
            <td>
                <p>
                    gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

**danielhagnoul** · 12/03/2009, 08h21

Bonjour.

Lorsque le td est composé de blocs - ex: p - il se produit un mouseout chaque fois que l'utilisateur glisse le pointeur d'un bloc à l'autre à l'intérieur d'un td.

bind() ou live() même comportement.

Mettre l'événement sur le tag td ou sur un id affecté à un td ne change pas le comportement.

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
        #resultat {
            float:left;
            width:150px;
            height:600px;
            border:1px solid black;
            padding:6px;
        }
        #probleme p {
            margin:12px;
            border:1px solid red;
        }
        #probleme {
            float:left;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            var i = 0;
 
            $("tr").bind("mouseout", function(){
                if (i > 25) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>tr mouseout event !");
                return false;
            });
 
            $("td").bind("mouseout", function(){
                if (i > 25) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>td mouseout event !");
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="resultat"></div>
    <div id="probleme">
        <table cellpadding="6" cellspacing="12" border="1" >
            <tr>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

**piotrr** · 12/03/2009, 09h16

J'ai essayé en englobant le tr dans un div et en mettant l'évènement sur le div mais ça donne le même résultat ...

Un autre moyen pour obtenir le même effet ?

**danielhagnoul** · 12/03/2009, 09h24

Bonjour.

Un mouseout sur une division composé de paragraphes, même comportement.

Conclusion : éviter l'usage des événements mouse. Utiliser autant que possible l'événement click.

**danielhagnoul** · 12/03/2009, 10h52

Bonsoir.

Solution possible : mouseleave mais seulement avec bind.

Code :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <style type="text/css">
        #resultat {
            float:left;
            width:150px;
            height:600px;
            border:1px solid black;
            padding:6px;
        }
        #divID {
            float:left;
            margin-left:12px;
            padding:12px;
            border:1px solid blue;
        }
        #divID p {
            margin:12px;
            border:1px solid red;
        }
        #tableID {
            float:left;
            margin-left:12px;
            padding:12px;
            border:1px solid blue;
        }
        #tableID td {
            border:1px solid green;
        }
        #tableID p {
            margin:12px;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready( function(){
            var i = 0;
 
            $("#divID").bind("mouseleave", function(){
                if (i > 25) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>#divID mouseleave event !");
                return false;
            });
 
            $("tr").bind("mouseleave", function(){
                if (i > 25) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>tr mouseleave event !");
                return false;
            });
 
            $("td").bind("mouseleave", function(){
                if (i > 25) {i = 0; $("#resultat").html("");} else {i++;}
                var txt = $("#resultat").html();
                $("#resultat").html(txt + "<br/>td mouseleave event !");
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="resultat"></div>
    <div id="divID">
        <p>
            gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
        </p>
        <p>
            gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
        </p>
        <p>
            gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
        </p>
    </div>
    <div>
        <table id="tableID" cellpadding="12" cellspacing="12" border="1">
            <tr>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
                <td>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                    <p>
                        gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf<br/>gijhkgfhsdjkghfkjdsghf
                    </p>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

**marcha** · 12/03/2009, 12h16

Envoyé par piotrr

Vous verrez que l'évènement sur un mouseout d'un "tr" ne se déclenche pas seulement quand on quitte la zone du tr. Il se déclenche même à l'intérieur d'un td
Une explication ?

Oui, le bubbling, (bouillonnement d'évènement).
Un peu d'explication simplifiée ici

**danielhagnoul** · 12/03/2009, 15h53

Bonjour Marcha.

Merci pour les liens.

Le comportement de mouseout est décrit dans la documentation jQuery : http://docs.jquery.com/Events/mouseout#fn

Mouseout fires when the pointer moves into or out from child element, while mouseleave doesn't.

mouseout sur un tr

jQuery

Discussions similaires

Partager

Partager