Element: pointerout event

{{APIRef("Pointer Events")}}

The pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the {{domxref("Element/pointerup_event", "pointerup")}} event for a device that does not support hover (see {{domxref("Element/pointerup_event", "pointerup")}}); after firing the {{domxref("Element/pointercancel_event", "pointercancel")}} event (see {{domxref("Element/pointercancel_event", "pointercancel")}}); when a pen stylus leaves the hover range detectable by the digitizer.

pointerout events have the same problems as {{domxref("Element/mouseout_event", "mouseout")}}. If the target element has child elements, pointerout and pointerover events fire as the pointer moves over the boundaries of these elements too, not just the target element itself. Usually, {{domxref("Element/pointerenter_event", "pointerenter")}} and {{domxref("Element/pointerleave_event", "pointerleave")}} events' behavior is more sensible, because they are not affected by moving into child elements.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

addEventListener("pointerout", (event) => { })

onpointerout = (event) => { }

Event type

A {{domxref("PointerEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("PointerEvent")}}

Event properties

This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}.

• {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
  • : Represents the angle between a transducer (a pointer or stylus) axis and the X-Y plane of a device screen.
• {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
  • : Represents the angle between the Y-Z plane and the plane containing both the transducer (a pointer or stylus) axis and the Y axis.
• {{domxref('PointerEvent.persistentDeviceId')}} {{ReadOnlyInline}} {{experimental_inline}}
  • : A unique identifier for the pointing device generating the PointerEvent.
• {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
  • : A unique identifier for the pointer causing the event.
• {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
  • : The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
• {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
  • : The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
• {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
  • : The normalized pressure of the pointer input in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
• {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
  • : The normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
• {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
  • : The plane angle (in degrees, in the range of -90 to 90) between the Y–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the Y axis.
• {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
  • : The plane angle (in degrees, in the range of -90 to 90) between the X–Z plane and the plane containing both the pointer (e.g., pen stylus) axis and the X axis.
• {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
  • : The clockwise rotation of the pointer (e.g., pen stylus) around its major axis in degrees, with a value in the range 0 to 359.
• {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
  • : Indicates the device type that caused the event (mouse, pen, touch, etc.).
• {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
  • : Indicates if the pointer represents the primary pointer of this pointer type.

Examples

Using addEventListener():

const para = document.querySelector("p");

para.addEventListener("pointerout", (event) => {
  console.log("Pointer moved out");
});

Using the onpointerout event handler property:

const para = document.querySelector("p");

para.onpointerout = (event) => {
  console.log("Pointer moved out");
};

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• Related events
  • {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
  • {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
  • {{domxref('Element/pointerover_event', 'pointerover')}}
  • {{domxref('Element/pointerenter_event', 'pointerenter')}}
  • {{domxref('Element/pointerdown_event', 'pointerdown')}}
  • {{domxref('Element/pointermove_event', 'pointermove')}}
  • {{domxref('Element/pointerup_event', 'pointerup')}}
  • {{domxref('Element/pointercancel_event', 'pointercancel')}}
  • {{domxref('Element/pointerleave_event', 'pointerleave')}}
  • {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}
  • {{domxref("Element/mouseout_event", "mouseout")}}