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 ?

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

Vue hybride

Discussions similaires

Partager

Partager