mouseout sur un tr

Version imprimable

mouseout sur un tr

Essayez ce code :

Code:

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 ?

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:

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>

12/03/2009, 00h59
danielhagnoul

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.

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:

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>

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:

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>

12/03/2009, 09h16
piotrr

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 ?
12/03/2009, 09h24
danielhagnoul

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.

Bonsoir.

Solution possible : mouseleave mais seulement avec bind.

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

12/03/2009, 12h16
marcha

Citation:

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
12/03/2009, 15h53
danielhagnoul

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.