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 y | Mozilla 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 dc6dce4a544fdca2df29d5ac0ea9906b 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】
