Форум

dmitry111 · #1 (**permalink**) 26.08.2012, 14:06

Как заставить 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>

bes · #2 (**permalink**) 26.08.2012, 14:41

чем clientX/clientY не устроил?
http://javascript.ru/tutorial/events...entx-y-pagex-y

dmitry111 · #3 (**permalink**) 26.08.2012, 14:52

Сообщение от bes

чем clientX/clientY не устроил?
http://javascript.ru/tutorial/events...entx-y-pagex-y

Они показывают значения относительно окна браузера. И если элемент находится в центре окна и не равен размерам окна, то вывод значений этих свойств некорректен

bes · #4 (**permalink**) 26.08.2012, 14:57

чем pageX/pageY не устроил?

http://javascript.ru/tutorial/events...entx-y-pagex-y

dmitry111 · #5 (**permalink**) 26.08.2012, 15:18

Мне необходимо получить значения элемента, желательно без "костылей"
Никак нельзя?

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

bes · #6 (**permalink**) 26.08.2012, 15:20

FF вроде никогда его не поддерживал http://www.quirksmode.org/dom/w3c_cssom.html
Похожее от devote jquery отличие ClientX от PageX и offsetX ?

dmitry111 · #7 (**permalink**) 26.08.2012, 15:22

Правильные значения показывают только oX (offsetX), oY (offsetY) , но они не работают в firefox почему-то

dmitry111 · #8 (**permalink**) 26.08.2012, 15:25

bes,
спасибо за ссылку

Угу, не поддерживает

dmitry111 · #9 (**permalink**) 26.08.2012, 17:21

Ну, предложит кто-нибудь как заставить работать clientX/clientY или pageX/pageY с позиционируемыми элементами?

Есть несколько идей решения этой задачи (например создать функцию, которая будет вычислять расстояние top/left до границ нужного элемента)
Но хотелось бы услышать/увидеть версии более авторитетных разработчиков, дабы не изобретать самому велосипеды

bes · #10 (**permalink**) 26.08.2012, 18:01

так пойдёт?

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

Форум

Справочник

Discord чат

Курсы javascript