Вторник, 07.01.2025, 06:52
Меню сайта
Категории раздела
JQuery плагины [59]
JQuery уроки [69]
PHP полезное [24]
PHP уроки [21]
Css [26]
JS [3]
SQL [9]
Css 3 [17]
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » JQuery уроки

mousemove()
Привязывает обработчик события к событию "mousemove" JavaScript, или вызывает данное событие на элемент.

.mousemove( handler(объектСобытия) )

Добавлена в версию: 1.0
handler(объектСобытия)
Функция
Функция выполняется каждый раз, когда вызывается событие.

.mousemove( )

Добавлена в версию: 1.0

.mousemove( [ данныеСобытия ], обработчик(объектСобытия)

Добавлена в версию: 1.4.3
данныеСобытия
Карта
Карта данных, которая будет передана в обработчик событий.
обработчик(объектСобытия)
Функция
Функция для выполнения каждый раз, когда событие вызвано.

Этот метод является сокращением для .bind('mousemove', handler) в первом варианте, и .trigger('mousemove') во втором.

Событие mousemove передается элементу, когда указатель мышки передвигается внутри элемента. Любой элемент HTML может получать это событие.

Для примера, рассмотрим HTML:

<div id="target">
 Move here
</div>
<div id="other">
 Trigger the handler

</div>
<div id="log"></div>
Результат выполнения кода выше:
Move here
Trigger the handler

Обработчик события может быть связан с целью:

$('#target').mousemove(function(event) {
 var msg = 'Handler for .mousemove() called at ' + event.pageX + ', ' + event.pageY;
 $('#log').append('<div> + msg + '</div>');
});

Теперь, когда указатель мышки передвигается внутри цели, сообщения будут приложенны к <div id="log">:

Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)

Мы также можем запустить событие, когда второй объект нажат:

$('#other').click(function() {
 $('#target').mousemove();
});

После выполнения этого кода, нажатие на поле запуска также выдаст сообщение:

Handler for .mousemove() called at (undefined, undefined)

При отслеживании перемещения мышки, обычно мы должны знать реальное положение указателя мыши. Объект события, который передается в обработчик содержит информацию о координатах мышки. Свойства, такие как .clientX, .offsetX, и .pageX доступны, но их поддержка отличается в различных браузерах. К счастью, jQuery нормализует атрибуты .pageX и .pageY, так, что они могут быть использованы во всех браузерах. Эти атрибуты предоставляют координаты X и Y курсора относительно верхнего левого угла страницы, как показано в примере выше результатов.

Мы должны помнить, что событие mousemove запускается, всякий раз, когда перемещается курсор мыши, даже на пиксель. Это означает, что сотни событий могут быть сгенерированы в очень небольшое количество времени. Если обработчик сколь-нибудь значимого процесса, или, если несколько обработчиков существуют для события, это может быть серьезной проблемой производительности для браузера. Важно, таким образом, оптимизировать обработчики mousemove как только возможно, и развязывать их, как только они больше не нужны.

Общий принцип заключается в связывании обработчика mousemove изнутри обработчика mousedown, и развязывать его от соответствующего обработчика mouseup. При осуществление этой последовательности событий, помните, что событие mouseup может быть посланно другому элементу HTML, чем тому, которому посланно mousemove. Для учета этого, обработчик mouseup должен обычно быть связан с элементом высоко в дереве DOM, таким, как .

Примеры

Отображает координаты, когда указатель мыши двигается над элементом div с желтым фоном. Координаты, в данном случае, показываются относительно фрейма.
$("div").mousemove(function(e){
 var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
 var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
 $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
 $("span:last").text("(e.clientX,e.clientY )-"+clientCoords);
});


Категория: JQuery уроки | Добавил: ChronoW (11.01.2013)
Просмотров: 2142 | Теги: mousemove(), jQuery mousemove | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: