offsetX, offsetY и firefox
Как заставить firefox понимать эти свойства?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>выпвып</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: green;"></div>
<div id="valueX"></div>
<div id="valueY"></div>
<script>
function func(e) {
var x = document.getElementById("valueX");
var y = document.getElementById("valueY");
x.innerHTML = e.offsetX;
y.innerHTML = e.offsetY;
}
document.getElementById("box").addEventListener("mousemove", func);
</script>
</body>
</html>
|
чем clientX/clientY не устроил?
http://javascript.ru/tutorial/events...entx-y-pagex-y |
Цитата:
|
чем pageX/pageY не устроил? :)
http://javascript.ru/tutorial/events...entx-y-pagex-y |
:)
Мне необходимо получить значения элемента, желательно без "костылей" Никак нельзя?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>выпвып</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: green; position: absolute; left: 200px;"></div>
<div id="clientX" style="position: absolute; top: 120px; left: 50px;"></div>
<div id="clientY" style="position: absolute; top: 150px; left: 50px;"></div>
<div id="pageX" style="position: absolute; top: 120px; left: 100px;"></div>
<div id="pageY" style="position: absolute; top: 150px; left: 100px;"></div>
<div id="offsetX" style="position: absolute; top: 120px; left: 150px;"></div>
<div id="offsetY" style="position: absolute; top: 150px; left: 150px;"></div>
<script>
function func(e) {
var clientX = document.getElementById("clientX");
var clientY = document.getElementById("clientY");
var pageX = document.getElementById("pageX");
var pageY = document.getElementById("pageY");
var offsetX = document.getElementById("offsetX");
var offsetY = document.getElementById("offsetY");
clientX.innerHTML = "cX" + e.clientX;
clientY.innerHTML = "cY" + e.clientY;
pageX.innerHTML = "pX" + e.pageX;
pageY.innerHTML = "pY" + e.pageY;
offsetX.innerHTML = "oX" + e.offsetX;
offsetY.innerHTML = "oY" + e.offsetY;
}
document.getElementById("box").addEventListener("mousemove", func);
</script>
</body>
</html>
|
FF вроде никогда его не поддерживал http://www.quirksmode.org/dom/w3c_cssom.html
Похожее от devote http://javascript.ru/forum/misc/2988...i-offsetx.html |
Правильные значения показывают только oX (offsetX), oY (offsetY) , но они не работают в firefox почему-то
|
bes,
спасибо за ссылку :thanks: Угу, не поддерживает :cray: |
Ну, предложит кто-нибудь как заставить работать clientX/clientY или pageX/pageY с позиционируемыми элементами?
Есть несколько идей решения этой задачи (например создать функцию, которая будет вычислять расстояние top/left до границ нужного элемента) Но хотелось бы услышать/увидеть версии более авторитетных разработчиков, дабы не изобретать самому велосипеды :) |
так пойдёт?
<style>
div {
position: absolute;
left: 40%;
top: 40%;
width: 50px;
height: 50px;
background: lightgreen;
padding: 20px;
}
</style>
<div>div</div><span></span>
<script>
window.onload = function () {
document.body.children[0].onmousemove = function (e) {
e = e || event;
var coords = this.getBoundingClientRect();
var x = parseInt(e.clientX - coords.left);
var y = parseInt(e.clientY - coords.top);
this.nextSibling.innerHTML = x + '<br>' + y;
}
}
</script>
|
bes,
ага :yes: |
bes,
А не будет ли ваша функция нагружать систему, каждый раз вычисляя местоположение элемента и вычисляя значения положения мыши? |
не имею в виду конкретный пример.
|
ну дык и e.clientX(Y) каждый раз вычисляются и ничего + просчитываются не все точки, по которым прошёл курсор
<div style="background: lightgrey">быстро проведи мышью по мне</div><div></div>
<script>
document.body.children[0].onmousemove = function (e) {
e = e || event;
this.nextSibling.innerHTML += e.clientX + '; ' + e.clientY + '<br>'
}
</script>
|
Покопавшись, нашел более "легкий" вариант написания кода:
<style>
div {
position: absolute;
left: 40%;
top: 40%;
width: 50px;
height: 50px;
background: lightgreen;
padding: 20px;
}
</style>
<div>div</div><span></span>
<script>
window.onload = function () {
document.body.children[0].onmousemove = function (e) {
e = e || event;
var coords = this.getBoundingClientRect();
var x = Number(e.clientX - coords.left);
var y = Number(e.clientY - coords.top);
this.nextSibling.innerHTML = x + '<br>' + y;
}
}
</script>
Так будет быстрее, потому как parseInt() помимо преобразования строки в число, еще анализирует ее, что занимает дополнительное время Кстати, ParseInt согласно ES3, если получает число начинающееся с "0", интерпретирует его как восьмеричное число, поэтому желательно указывать во втором параметре систему счисления. Хотя можно и не указывать, это для особо придирчивых :) |
ну я лишь таким образом округлил, там итак числа, можно округлить и другими способами :)
|
Вложений: 1
Цитата:
Давно писал самописные всплывушки(см. аттач). Может стиль не супер, но сейчас посмотрел в FF и в IE9, все работает, как и прежде. Для оперы только надо изменить поправку и снести все касающееся IE6-IE7.
//вычисляем координаты элемента и относительно их устанвливаем подсказку
var coords=getOffset(this);
document.getElementById(help_up_id).style.top=coords['top'] - 85 + 'px'
document.getElementById(help_up_id).style.left=coords['left'] - 14 + 'px';
//поправки для нехороших браузеров.
if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
document.getElementById(help_up_id).style.top=coords['top'] - 73 + 'px';
document.getElementById(help_up_id).style.left=coords['left'] - 8 + 'px';
}
if (/MSIE (7).+Win/.test(navigator.userAgent))
{
document.getElementById(help_up_id).style.top=coords['top'] - 70+ 'px';
}
var ua = navigator.userAgent.toLowerCase();
isOpera = (ua.indexOf("opera") != -1);
if (isOpera){
document.getElementById(help_up_id).style.top=coords['top'] - 73 + 'px';
}
//Подсказкам для ссылок небольшая поправка координат вправо и вниз.
if(this.tagName=='A')
{
var help_top=parseInt(document.getElementById(help_up_id).style.top);
var help_left=parseInt(document.getElementById(help_up_id).style.left);
//поправки для нехороших браузеров.
if (isOpera){
document.getElementById(help_up_id).style.top=help_top +6 + 'px';
document.getElementById(help_up_id).style.left=help_left +35 + 'px';
}
else if
(/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
{
document.getElementById(help_up_id).style.top=help_top +6 + 'px';
document.getElementById(help_up_id).style.left=help_left +35 + 'px';
}
else if
(/MSIE (7).+Win/.test(navigator.userAgent))
{
document.getElementById(help_up_id).style.top=help_top + 6 + 'px';
document.getElementById(help_up_id).style.left=help_left +35 + 'px';
}
else
{
document.getElementById(help_up_id).style.top=help_top + 19 + "px";
document.getElementById(help_up_id).style.left=help_left + 35 + "px";
}
}
|
| Часовой пояс GMT +3, время: 05:38. |