Détecter la position de la souris dans une fonction

Version imprimable

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:

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:

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

18/03/2009, 19h05
Bovino

La réponse donnée dans la FAQ ne te convient pas ?
18/03/2009, 20h02
polemoss

non car event n'est pas accessible

Code:

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

j'ai comme erreur : event is not defined

vois tu comment faire ?

Bonsoir.

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

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

19/03/2009, 09h18
danielhagnoul

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.

1 pièce(s) jointe(s)

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:

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:

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