.mousemove() JQ Home  <<  Events  <<  .mousemove()

• <<    .mouseleave()
• .mouseout()     >>

Mousemove event handler.

Description

The .mousemove() method is used to bind an event handler to The JavaScript mousemove event or trigger that event on the specified element.

• The mousemove event is sent to an element when the mouse pointer is moved within the element it is bound to.
• If it is a requirement to capture the the actual mouse coordinates you can examine the event object by passing it to the mousemove event handler function to determine the .pageX and .pageY properties of the event object. These properties provide the X and Y coordinates of the mouse pointer relative to the top-left corner of the document.

Syntax

Parameters

Return

A jQuery object.

.mousemove( ) Example  Events  <<  Top

Trigger the mousemove JavaScript event on the specified element.

• This signature is a shortcut for .trigger('mousemove').

In the example below we show two new messages in the 'p' elements below every time the mouse moves over the image with the id of 'curry1'.

When the mouse moves while over the image, we trigger off the mousemove JavaScript event on the 'image'. This then fires off the $('#curry1').mousemove(function(){}) code which outputs the messages.

$(function(){
  $('#curry1').mousemove(function(event) {
    var pageCoords = '(' + event.pageX + ', ' + event.pageY + ' )';
    var viewableCoords = '(' + event.clientX + ', ' + event.clientY + ' )';
   
    $('#animspan1').text('( event.pageX, event.pageY ) : ' + pageCoords);
    $('#animspan2').text('( event.clientX, event.clientY ) : ' + viewableCoords);
  });
});

The page coordinates are:

The viewable page coordinates are:

.mousemove( handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the mousemove JavaScript event.

• This signature is a shortcut for .on('mousemove', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the mouse is moved within the 'div' element with an id of 'div2' or the image within it.

When the is moved within the 'div2' element, the mousemove JavaScript event fires off the addText(event) mothod which outputs a message.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.

$(function(){
  $('#div2').mousemove(addText);

  function addText(event) {
    $('#scrollspan1').append('mousemove 1 **JavaScript event triggered**');
  }
});

We will show a message here.

.mousemove( [eventData ,] handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the mousemove JavaScript event, optionally passing an object of data.

• This signature is a shortcut for .on('mousemove', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan2' each time the 'div' element with an id of 'div3' below is moved over.

When the mouse button moves over the division or the image within it, the mousemove JavaScript event fires off the $('#div3').mousemove({ param1: '#scrollspan2', param2: 'mousemove 2 ', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'mousemove 2 ', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.

$(function(){
  $('#div3').mousemove({ param1: '#scrollspan3', param2: 'mousemove 2 ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);

  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + event.data.param3');
  }
});

We will show a message here.

Related Tutorials

jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events

• <<    .mouseleave()
• .mouseout()     >>