Движение мышки по блоку

onmousemove javascript или "Движение мышки по блоку", сколько способов существует определить движение мышки по элементу Dom?

Подробно о "onmousemove Event"

1. Использование "onmousemove" внутри тега.
2. Использование onmousemove + function
3. Пример использования onmousemove + addEventListener
4. Скачать

Использование "onmousemove" внутри тега.

Одним из способов использования onmousemove - размещение "onmousemove" внутри тега.

Для того, чтобы продемонстрировать использование "onmousemove" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onmousemove" :

Также туда добавим событие "onmousemove" с функцией myFunction:

<div onmousemove="myFunction(event)" class="onmousemove"></div>

Css:

Немного стилей для нашего блока:

.onmousemove{
background: #e9e9e9;
width: 300px;
height: 100px;
margin: auto;
border: 1px solid;
}


Javascript

Напишем нашу функцию:

<script>
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Координаты: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
}
</script>


Результат использования onmousemove в теге:

Будем передавать координаты в отдельный div "Здесь координаты".

Наведите мышку на блок:

Здесь координаты




Использование onmousemove + function

Второй способ использования onmousemove равно function.

Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу

<div id="theDIV" class="onmousemove"></div>

В абзац "p" будем передавать полученные данные:

<p id="demo_1"></p>

Стили повторять не буду - см. выше.

Соберем скрипт:

<script>

document.getElementById("theDIV").onmousemove = function(e) {

var x = e.clientX;

var y = e.clientY;

var coor = "Координаты: (" + x + "," + y + ")";

document.getElementById("demo_1").innerHTML = coor;

};

</script>

Результат onmousemove + function

Проведите мышкой по блоку:

Здесь координаты




Пример использования onmousemove + addEventListener

Следующий вариант использования onmousemove, аналогичен первому, только здесь будем использовать "addEventListener":

Html:

<div id="theDIV_2" class="onmousemove"></div>

<p id="demo_2"></p>

Css:

Аналогичные первому пункту.

Javascript

<script>

document.getElementById("theDIV_2").addEventListener("mousemove", function(e) {

var x = e.clientX;

var y = e.clientY;

var coor = "Координаты: (" + x + "," + y + ")";

document.getElementById("demo_2").innerHTML = coor;

});

</script>

Результат onmousemove + addEventListener

Здесь координаты