Share via

MouseMove Event

  • Article

Occurs when the coordinate position of the mouse changes.

XAML
<object MouseMove="eventhandlerFunction" .../>
Scripting
[token = ]object.AddEventListener("MouseMove", eventhandlerFunction)

AddEventListener Parameters

token

integer

A token that is returned from the function, which you can optionally retain as a variable. If you intend to call RemoveEventListener to remove the handler, you will need this token.
eventhandlerFunction

object

The name of your event handler function as it is defined in script. When used as an AddEventListener parameter, quotes around the function name are not required. See Remarks.

Event Handler Parameters

sender

object

Identifies the object that invoked the event.
mouseEventArgs

object

mouseEventArgs.GetPosition(element).X identifies the x-coordinate position of the mouse.

mouseEventArgs.GetPosition(element).Y identifies the y-coordinate position of the mouse.

mouseEventArgs.Shift determines whether the SHIFT key is down.

mouseEventArgs.Ctrl determines whether the CTRL key is down.

Remarks

The MouseMove event can be defined for any UIElement-derived class, such as Canvas, TextBlock, or Rectangle.

The MouseMove event is typically fired in response to the mouse moving over the object's bounding area. If the mouse enters the object's bounding area, the MouseEnter event precedes the MouseMove event for the object. However, it is possible to receive a MouseMove event without the mouse moving. This can happen if the object, rather than the mouse, is moved under the cursor position.

The MouseMove event is a bubbling event. This means that if there multiple MouseMove events defined for a tree of elements, the event is received by each object in the object hierarchy, starting with the object that directly receives the event and then bubbling to each successive parent element. The "bubbling" metaphor indicates that the event starts at the bottom and works its way up the object tree. For a bubbling event, sender in the arguments is the object where the event is handled, not necessarily the object that actually received the input condition that initiated the event.

You can also add handlers in script using a quoted string for the event handler name:

object.AddEventListener("MouseMove", "eventhandlerFunction")

This syntax also returns a token; however, the token is not an absolute requirement for removing the handler, in cases where the handler was added by using a quoted string. For details, see RemoveEventListener.

Examples

the following XAML example illustrates event bubbling and shows MouseMove events defined for a Canvas and two Rectangle objects. In this case, if you move the mouse over either Rectangle object, it receives the MouseMove event. The event is then bubbled upward to the parent Canvas.

XAML 
<!-- The Rectangle MouseMove events occur first, then the Canvas MouseMove event. -->
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Loaded="onLoaded"
  MouseMove="rootCanvasMouseMove">
  <Rectangle
    MouseMove="rect1MouseMove"
    Width="100" Height="100"
    Fill="PowderBlue" />
  <Rectangle
    MouseMove="rect2MouseMove"
    Canvas.Top="50" Canvas.Left="50"
    Width="100" Height="100"
    Fill="Gold" Opacity="0.5" />
  <TextBlock
    x:Name="statusTextBlock"
    Canvas.Top="180" />
</Canvas>

The following JavaScript example shows how to implement the MouseMove event handler functions for the corresponding XAML content in the previous example:

JavaScript 
var statusTextBlock;
function onLoaded(sender, eventArgs)
{
    statusTextBlock = sender.findName("statusTextBlock");
}
function rootCanvasMouseMove(sender, mouseEventArgs)
{
    var msg = "x:y = " + mouseEventArgs.getPosition(null).x + ", " + mouseEventArgs.getPosition(null).y;
    // Uncomment the next line to show MouseMove event bubbling.
    // statusTextBlock.text = "rootCanvas: " + msg;
}
function rect1MouseMove(sender, mouseEventArgs)
{
    var msg = "x:y = " + mouseEventArgs.getPosition(null).x + ", " + mouseEventArgs.getPosition(null).y;
    statusTextBlock.text = "rect1: " + msg;
}
function rect2MouseMove(sender, mouseEventArgs)
{
    var msg = "x:y = " + mouseEventArgs.getPosition(null).x + ", " + mouseEventArgs.getPosition(null).y;
    statusTextBlock.text = "rect2: " + msg;
}

The following illustration shows the displayed XAML content.

Example content

Example content

When the mouse moves over the Rectangle objects, the event handlers display the x:y coordinate position of the mouse. Notice that when the mouse is over the overlapping area of the Rectangle objects, the top-most object blocks the MouseMove events from the obscured object--events do not bubble to siblings, only ancestors. Also notice that if you were to uncomment the line in the rootCanvasMouseMove event handler function in the JavaScript code, the function would correctly display the position of the mouse for both its child objects.

In this case, where the Canvas object has a Height or Width property set to 0 and a Background property set to null, the MouseMove event is only generated for the child objects. This is because the Canvas object has no visibility as far as MouseMove events are concerned.

The mouse position reported in the mouseEventArgs parameter value may not be exactly on the boundary of the object, due to the coalescing of mouse movements.

Applies To

Canvas, Ellipse, Glyphs, Image, InkPresenter, Line, MediaElement, Path, Polygon, Polyline, Rectangle, TextBlock

See Also

Silverlight Events
Silverlight Mouse Support
MouseEnter
MouseLeave
MouseLeftButtonDown
MouseLeftButtonUp
GetPosition