Comment obtenir la position de la souris en javascript

Comment obtenir la position de la souris dans JS : 1. Utilisez les attributs clientX et clientY ; 2. Utilisez les attributs offsetX et offsetY ; 3. Utilisez les attributs pageX et pageY ; 4. Utilisez les attributs screenX et screenY ; les attributs layerX et layerY.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

En JavaScript, lorsqu'un événement se produit, obtenir la position de la souris est un événement très important. En raison de l'incompatibilité des navigateurs, différents navigateurs définissent différents attributs dans leurs objets d'événement respectifs. Les descriptions sont présentées dans le tableau suivant. Ces attributs définissent les coordonnées du pointeur de la souris en valeurs de pixels, mais comme ils font référence à des systèmes de coordonnées différents, il est difficile de calculer avec précision la position de la souris.

prend le coin supérieur gauche de la fenêtre du navigateur comme origine et positionne le y- coordonnée de l'axe prend le coin supérieur gauche de l'objet cible de l'événement en cours comme origine, Positionnez la coordonnée de l'axe xUtilisez le coin supérieur gauche de l'objet cible de l'événement en cours comme origine, positionnez les coordonnées de l'axe y Prenez le coin supérieur gauche coin de l'objet document (c'est-à-dire la fenêtre du document) comme origine, positionnez la coordonnée de l'axe x Prenez le coin supérieur gauche de l'objet document (c'est-à-dire le document window) comme origine, Positionnez la coordonnée de l'axe y Le coin supérieur gauche de l'écran de l'ordinateur est l'origine, positionnez l'Origine, positionnez la coordonnée de l'axe y "Tous les navigateurs" L'élément parent en position absolue le plus proche (ou l'objet document s'il n'y en a pas) est le coin supérieur gauche de l'élément, positionnant les coordonnées de l'axe yMozilla et Safari

Exemple 1

Ce qui suit décrit comment utiliser plusieurs attributs de coordonnées de la souris ensemble pour obtenir une conception de positionnement de la souris compatible avec différents navigateurs.

Tout d’abord, jetons un coup d’œil aux propriétés screenX et screenY. Ces deux attributs sont pris en charge par tous les navigateurs et doivent être considérés comme les attributs les plus préférés, mais leur système de coordonnées est l'écran de l'ordinateur, c'est-à-dire que le coin supérieur gauche de l'écran de l'ordinateur est l'origine du positionnement. Cela n'a aucune valeur pour les pages Web qui utilisent la fenêtre du navigateur comme espace actif. Parce que différentes résolutions d'écran, différentes tailles et positions de fenêtres de navigateur rendent difficile le positionnement de la souris sur une page Web.

Deuxièmement, si l'objet document est utilisé comme système de coordonnées, vous pouvez envisager d'utiliser les attributs pageX et pageY pour obtenir le positionnement dans la fenêtre du navigateur. C'est une bonne idée pour concevoir le suivi de la souris, car l'élément suivant se déplace généralement dans la fenêtre du navigateur de manière absolue. Dans le gestionnaire d'événements mousemove, transmettez les valeurs des attributs pageX et pageY en haut et à gauche du. élément absolument positionné. Juste des attributs de style.

Le modèle d'événement IE ne prend pas en charge les attributs ci-dessus, nous devons donc trouver des moyens d'être compatible avec IE. Les attributs clientX et clientY sont basés sur l'objet window comme système de coordonnées, et le modèle d'événement IE les prend en charge, vous pouvez donc les choisir. Cependant, compte tenu du décalage possible de la barre de défilement d'objets tels que la fenêtre, le décalage du défilement de la page par rapport à l'objet fenêtre doit également être ajouté.

复制纯文本复制

var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}

var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}

Dans le code ci-dessus, détectez d'abord si les attributs pageX et pageY existent, et s'ils existent, obtenez leurs valeurs s'ils n'existent pas, détectez et obtenez les valeurs des attributs clientX et clientY, puis ajoutez les valeurs des propriétés scrollLeft et scrollTop des objets document .documentElement et document.body, de sorte que les mêmes valeurs de coordonnées soient obtenues dans différents navigateurs.

Exemple 2

Encapsulez le code de positionnement de la souris. Idée de conception : selon l'objet spécifique passé et le décalage par rapport au pointeur de la souris, l'objet peut être commandé pour suivre le mouvement de conservation de l'eau.

Définissez d'abord une fonction wrapper. Les paramètres d'entrée transmis dans la fonction de conception sont le pointeur de référence de l'objet, la distance de décalage par rapport au pointeur de la souris et l'objet événement. Ensuite, la fonction encapsulée peut obtenir la valeur de coordonnée de la souris en fonction de l'objet d'événement et définir l'objet sur un positionnement absolu. La valeur de positionnement absolue est la valeur de coordonnée actuelle du pointeur de la souris.

Le code d'emballage est le suivant :

复制纯文本复制

var pos = function (o, x, y, event) {  //鼠标定位赋值函数
    var posX = 0, posY = 0;  //临时变量值
    var e = event || window.event;  //标准化事件对象
    if (e.pageX || e.pageY) {  //获取鼠标指针的当前坐标值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    o.style.position = "absolute";  //定义当前对象为绝对定位
    o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
    o.style.left = (posX + x) + "px";  //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}

var pos = function (o, x, y, event) {  //鼠标定位赋值函数
    var posX = 0, posY = 0;  //临时变量值
    var e = event || window.event;  //标准化事件对象
    if (e.pageX || e.pageY) {  //获取鼠标指针的当前坐标值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    o.style.position = "absolute";  //定义当前对象为绝对定位
    o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
    o.style.left = (posX + x) + "px";  //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}

Le code d'emballage est testé ci-dessous. Enregistrez le gestionnaire d'événements de mouvement de la souris pour l'objet document et transmettez la fonction d'encapsulation du positionnement de la souris. L'objet transmis est l'élément

et sa position est décalée de (10,20) en bas à droite de la souris. aiguille. Étant donné que le modèle événementiel DOM transmet les objets événements sous forme de paramètres, n'oubliez pas de transmettre l'objet événement dans la fonction appelante.

复制纯文本复制

<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

Exemple 3

Obtenir les coordonnées du pointeur de la souris dans l'élément. Ceci peut être réalisé en utilisant les propriétés offsetX et offsetY, mais n'est pas pris en charge par le navigateur Mozilla. Les attributs layerX et layerY peuvent être éventuellement utilisés pour être compatibles avec le navigateur Mozilla.

Le code de conception est le suivant :

复制纯文本复制

var event = event || window.event;
if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
    x = event.offsetX;
    y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
    x = event.layerX;
    y = event.layerY;
}

var event = event || window.event;
if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
    x = event.offsetX;
    y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
    x = event.layerX;
    y = event.layerY;
}

Cependant, les attributs layerX et layerY sont basés sur l'élément parent positionné de manière absolue comme référence, et non sur l'élément lui-même. S'il n'y a pas d'élément parent positionné de manière absolue, l'objet document sera utilisé comme référence. À cette fin, vous pouvez l'ajouter dynamiquement via des scripts ou l'ajouter manuellement et concevoir un élément parent positionné de manière absolue entourant la couche externe de l'élément, ce qui peut résoudre les problèmes de compatibilité du navigateur. Pour tenir compte de l'erreur provoquée par la distance entre les éléments, il peut être approprié de soustraire un décalage de 1 ou quelques pixels.

Le code de conception complet est le suivant :

复制纯文本复制

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //标准化事件对象
        if (event.offsetX || event.offsetY) {
            t.value = event.offsetX + "" + event.offsetY;
        } else if (event.layerX || event.layerY) {
            t.value = (event.layerX-1) + "" + (event.layerY-1);
        }
    }
</script>

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //标准化事件对象
        if (event.offsetX || event.offsetY) {
            t.value = event.offsetX + "" + event.offsetY;
        } else if (event.layerX || event.layerY) {
            t.value = (event.layerX-1) + "" + (event.layerY-1);
        }
    }
</script>

Cette approche peut résoudre le problème du positionnement du pointeur de la souris à l'intérieur de l'élément. Cependant, étant donné qu’un élément positionné de manière absolue est enveloppé à l’extérieur de l’élément, cela détruira la disposition structurelle de la page entière. Cette méthode peut être envisagée en supposant que cette approche artificielle ne causera pas de confusion dans la disposition structurelle.

【Apprentissage recommandé : Tutoriel avancé javascript】

Propriétés et leur compatibilité

Propriétés	Description	Compatibilité
client Safari		clientY
Tous les navigateurs, non compatible avec Safari		offsetX
Tous les navigateurs, non compatible avec Mozilla		offsetY
Tous les navigateurs, non compatibles avec Mozilla		pageX
Tous les navigateurs, non compatibles avec IE		pageY
pour tous les navigateurs, non compatible avec IE		screenX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!