jQuery метод .mousemove()

Определение и применение

jQuery метод .mousemove() привязывает JavaScript обработчик событий mousemove (срабатывает, когда указатель мыши перемещается внутри элемента), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).mousemove() // метод используется без параметров

$( selector ).mousemove( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).mousemove( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .mousemove(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "mousemove", handler )

$( selector ).trigger( "mousemove" )

Добавлен в версии jQuery

Значения параметров

Пример старого кода

Пример использования jQuery метода .mousemove() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div>Элемент div</div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').mousemove()
    })
    $('div').mousemove(function () {
        $('div').toggleClass('orangered-bg')
    })
})

style.css

CSS

div {
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background: blue;
}
.orangered-bg {
    background: orangered;
}

В этом примере с использованием jQuery метода .mousemove() мы при нажатии на элемент <button> (кнопка) вызываем событие "mousemove" на элементе <div>. Самому элементу <div> задаем, что при срабатывании события "mousemove" на элементе выполнить функцию, которая с использованием метода .toggleClass() добавит, или уберет класс orangered-bg у элемента, что приводит к мерцанию заднего фона элемента при перемещении курсора над ним, так как событие вызывается многократно.

Рассмотрим следующий пример в котором с помощью метода .mousemove() будем остлеживать координаты курсора:

Метод .mousemove() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<div></div>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $(document).mousemove(function (event) {
        // задаем функцию при перемещении курсора мыши над документом
        $('div:first').text('event.pageX: ' + event.pageX) // добавляем в первый элемент <div> в документе позицию курсора мыши относительно левого края документа
        $('div:last').text('event.pageY: ' + event.pageY) // добавляем в последний элемент <div> в документе позицию курсора мыши относительно верхнего края документа
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .mousemove() мы при перемещении курсора мыши над документом задаем функцию, которая в качестве параметра получает объект Event. С использованием метода .text() и свойств объекта Event (event.pageX и event.pageY) добавляем в первый и последний элемент <div> информацию о позиции курсора мыши относительно левого и верхнего края документа (вместо document можно указать любой интересующий Вас элемент и узнать позицию курсора относительно этого элемента, а не всего документа).