Détecter la position de la souris dans une fonction

**polemoss** · 18/03/2009, 19h28

Bonjour,

J'arrive à détecter la position de la souris grâce à Jquery quand je ne suis pas dans une fonction sans problème, en faisant comme ça :

Code :

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

1
2
3
4
5
6
7
 
jQuery(document).ready(function(){
   $().mousemove(function(e){
      oLeft = e.pageX;
      oTop = e.pageY;
   }); 
})

Par contre je n'arrive pas à modifier ce code avec la position de la souris

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function getAbsoluteLeft(objectId) {
    // Get an object left position from the upper left viewport corner
    o = document.getElementById(objectId)
    oLeft = o.offsetLeft            // Get left position from the parent object
    while(o.offsetParent!=null) {   // Parse the parent hierarchy up to the document element
        oParent = o.offsetParent    // Get parent object reference
        oLeft += oParent.offsetLeft // Add parent left position
        o = oParent
    }
 
    return oLeft;
}

Je suis honnête j'ai cherché mais je ne sais pas du tout comment faire, ici ça détecte la position d'un objet, mais pour des besoins précis j'ai besoin que oLeft retourne la position horizontale de la souris

à l'aide svp

**Bovino** · 18/03/2009, 20h05

La réponse donnée dans la FAQ ne te convient pas ?

**polemoss** · 18/03/2009, 21h02

non car event n'est pas accessible

Code :

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

$(document).ready(JT_init(event));

j'ai comme erreur : event is not defined

vois tu comment faire ?

**danielhagnoul** · 19/03/2009, 02h12

Bonsoir.

Le code donne les offsets demandés mais attention voir la note de Mozilla.

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
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <style type="text/css">
        #localisation {
            float:left;
            width:250px;
            height:600px;
            border:1px solid black;
            padding:6px;
        }
        #divid {
            float:left;
            margin-left:12px;
            padding:12px;
            border:1px solid blue;
        }
        #divid p {
            margin:12px;
        }
        #paraid {
            text-decoration:underline;
        }
        #spanid {
            text-decoration:underline;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           /*
           https://developer.mozilla.org/En/DOM/Element.offsetLeft
           
           offsetLeft returns the position the upper left edge of the element;
not necessarily the 'real' left edge of the element. This is important for
inline elements (such as span) in flowed text that wraps from one line to the next.
The span may start in the middle of the line and wrap around to the
beginning of the next line. The offsetLeft will refer to the left edge of the
start of the span, not the left edge of text at the start of the second line.
Therefore, a box with the left, top, width and height of offsetLeft,
offsetTop, offsetWidth and offsetHeight will not be a bounding box for a
span with wrapped text. (And, I can't figure out how to find the leftmost
edge of such a span, sigh.)
 
           offsetParent returns a reference to the object which is the closest 
(nearest in the containment hierarchy) positioned containing element. If the
 element is non-positioned, the root element (html in standards compliant 
mode; body in quirks rendering mode) is the offsetParent. offsetParent 
returns null when the element has style.display set to "none". 
 
           */
 
           function getAbsoluteLeft($this) {
                var oLeft = $this.offsetLeft;
                var o = $this;
 
                while(o.offsetParent != null) {
                    var oParent = o.offsetParent;
                    oLeft += oParent.offsetLeft;
                    o = oParent;
                }
 
                return oLeft;
            }
 
            var divpos = "divid<br/>" + "offsetLeft = " + $("#divid")[0].offsetLeft + "<br/>AbsoluteLeft = " + getAbsoluteLeft($("#divid")[0]);
            var parapos = "paraid<br/>" + "offsetLeft = " + $("#paraid")[0].offsetLeft + "<br/>AbsoluteLeft = " + getAbsoluteLeft($("#paraid")[0]);
 
            var spanpos = "spanid<br/>" + "offsetLeft = " + $("#spanid")[0].offsetLeft + "<br/>AbsoluteLeft = " + getAbsoluteLeft($("#spanid")[0]);
 
            $("#localisation").html(divpos + "<br/><br/>" + parapos + "<br/><br/>" + spanpos);
        });
    </script>
</head>
<body>
    <div id="localisation"></div>
    <div id="divid">
        <p id="paraid">Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte <span id="spanid">quelconque</span> pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
        <p>Un texte quelconque pour remplir la div.</p>
    </div>
</body>
</html>

**danielhagnoul** · 19/03/2009, 10h18

Bonjour.

Attention, je constate que les résultats sont très différents entre IE7 et Firefox.

Firefox

divid
offsetLeft = 284
AbsoluteLeft = 284

paraid
offsetLeft = 309
AbsoluteLeft = 309

spanid
offsetLeft = 364
AbsoluteLeft = 364

IE7

divid
offsetLeft = 276
AbsoluteLeft = 286

paraid
offsetLeft = 24
AbsoluteLeft = 310

spanid
offsetLeft = 79
AbsoluteLeft = 365

mais je n'ai pas le temps d'en faire plus ce matin.

**polemoss** · 19/03/2009, 10h28

Salut merci de ton aide en effet les résultats son très différents entre ff et ie ... depuis le temps ils pourraient faire un effort.

Sinon en fait j'ai trouvé une autre solution bien plus efficace et plus simple

voici le code important :

Code :

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

1
2
3
4
5
function JT_init(){
           $("a.jTip")
           .hover(function(e){JT_show(this.href,this.id,this.name,e)},function(){$('#JT').remove()})
           .click(function(){return false});       
}

ensuite e passé en param le reste est super simple

à la place de objectId je passe en param e dans tous mes appels de fonction, pour en arriver à ça :

Code :

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

1
2
3
4
function getAbsoluteLeft(e) {
    oLeft = e.pageX+30;
    return oLeft;
}

le +30 étant pour avoir un petit décale entre l'info bulle et la souris, donc ça marche mais le résultat n'est pas agréable je vais passé à une autre fonction qui prends mieux en charge le mousemove.

Merci de vos aides

PS pour info c'étais le script Jquery Jtips

Détecter la position de la souris dans une fonction

jQuery

Discussions similaires

Partager

Partager