Share via

MouseLeave Event

  • Article

Occurs when the mouse leaves the bounding area of an object.

XAML
<object MouseLeave="eventhandlerFunction" .../>
Scripting
[token = ]object.AddEventListener("MouseLeave", 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

This parameter is always set to null.

Event Information

Remarks

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

The MouseLeave event is typically fired in response to the mouse leaving the object's bounding area. However, it is possible for an object to continue receiving mouse events after receiving a MouseLeave event in the following case:

  • The object is capturing mouse events. When an object captures the mouse, it receives mouse input whether or not the cursor is within its borders. The mouse is typically captured in this manner only during drag-and-drop operations, and retains capture until the drop action of the drag-and-drop operation occurs.

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

object.AddEventListener("MouseLeave", "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.

You can define multiple MouseLeave events for objects in XAML content. However, if a child object and its parent object both define a MouseLeave event, the parent object's MouseLeave event is fired before the child object's MouseLeave event. This is not a case of a bubbling event, it only indicates that the mouse has entered both objects, potentially at different times depending on the object layout.

Unlike the MouseEnter event, the MouseLeave event does not provide the mouse position as an event argument, since the location of the mouse position relative to the object is unknown once it is out of bounds. This means you can omit the mouseEventArgs parameter for the MouseLeave event handler function, although you may still be interested in the sender parameter.

Examples

The following XAML example shows MouseLeave events defined for a Canvas and TextBlock object. In this case, the Canvas object's event handler function is invoked before the TextBlock object's event handler function.

XAML 
<!-- The Canvas MouseLeave event fires first, then the TextBlock MouseLeave event -->
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  MouseLeave="rootCanvasMouseLeave">
  <TextBlock
   x:Name="captionTextBlock" 
   MouseLeave="textBlockMouseLeave"
   Text="Test order of MouseLeave events" />
</Canvas>

The following JavaScript example shows how to implement a MouseLeave event handler function:

JavaScript 
function rootCanvasMouseLeave(sender)
{   
    // Remove the visibility of the caption TextBlock.
    sender.findName("captionTextBlock").opacity = 0;
}

Applies To

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

See Also

Silverlight Events
Silverlight Mouse Support
MouseEnter
MouseLeftButtonDown
MouseLeftButtonUp
MouseMove