JavaScript Element beforexrselect Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word BEFOREXRSELECT

Definition

In JavaScript, the beforexrselect event fires before WebXR select events (select, selectstart, selectend) are dispatched (MDN). Use it on a DOM overlay to suppress XR world input while the user taps HTML UI.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for beforexrselect. Start with this line.

JavaScript
el.addEventListener("beforexrselect", fn)
CallWhat it does
el.addEventListener("beforexrselect", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("beforexrselect", …) — no import required.

Library declarations
JavaScript
el.addEventListener("beforexrselect", fn)

Parameters

ParameterDescription
DOM overlay elementRequired. Listen here so the event can bubble over UI
WebXR sessionRequired. Event fires during XR select toward the overlay
preventDefault()Optional. Blocks following XR select events (MDN)

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Suppress XR Select on Overlay (MDN)

Cancel beforexrselect on the overlay so world select events do not fire.

JavaScript
document
  .getElementById("xr-overlay")
  .addEventListener("beforexrselect", (ev) => ev.preventDefault());
Try It Yourself

How It Works

  1. Target the overlay root. One listener covers nested UI via bubbling (MDN).
  2. Call preventDefault(). Suppresses following XR select* events.
  3. HTML keeps the interaction. Buttons/links on the overlay stay usable.
  4. Avoid double input. World handlers do not also treat the press as a 3D select.

Example 2 — Log event.session

Confirm the event type and read the XRSession when it fires.

JavaScript
const overlay = document.getElementById("xr-overlay");
const out = document.getElementById("out");

overlay.addEventListener("beforexrselect", (event) => {
  out.textContent =
    "type: " + event.type +
    "\ncancelable: " + event.cancelable +
    "\nsession: " + (event.session ? "XRSession" : "none");
  event.preventDefault();
});
Try It Yourself

How It Works

  1. Receive an XRSessionEvent. Same family as other session-state events.
  2. Read event.session. The active XRSession for this select.
  3. Inspect flags. Confirm cancelable before calling preventDefault().
  4. Cancel when needed. Keep overlay UI from also driving the world.

Example 3 — Feature Detect

Check for the handler property before depending on the Experimental event.

JavaScript
const supported = "onbeforexrselect" in document.documentElement;
const hasXR = !!(navigator.xr);

console.log("onbeforexrselect:", supported);
console.log("navigator.xr:", hasXR);

if (!supported) {
  console.log("Keep normal click handlers on the overlay");
}
Try It Yourself

How It Works

  1. Probe onbeforexrselect. Cheap signal for the event surface.
  2. Also check navigator.xr. WebXR itself may be missing.
  3. Keep click/pointer handlers. Overlay must work without XR.
  4. Test on device. Limited availability means desktop checks are not enough.
Compatibility

Browser Support

Element.beforexrselect is marked Experimental and Limited availability on MDN (not Baseline). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Experimental · Limited availability

Element beforexrselect

Fires before WebXR select events so a DOM overlay can suppress world input.

Limited Check compat
Google Chrome WebXR DOM overlays · check BCD
Partial
Mozilla Firefox Limited / check BCD
Limited
Apple Safari Limited / check BCD
Limited
Microsoft Edge Follow Chromium WebXR (check BCD)
Partial
Opera Follow Chromium behavior
Partial
Internet Explorer No WebXR / beforexrselect
Not supported
beforexrselect Limited availability

Bottom line: Use on Chromium WebXR DOM overlays, feature-detect, and keep HTML click handlers. See the MDN Element beforexrselect reference.

Frequently Asked Questions

It fires before WebXR select events (select, selectstart, selectend) are dispatched (MDN). Apps use it on a DOM overlay to suppress XR world input while the user interacts with HTML UI.
No. MDN marks it Experimental and Limited availability (not Baseline). It is part of the WebXR DOM Overlays Module. It is not Deprecated or Non-standard.
An XRSessionEvent (inherits from Event). It exposes a read-only session property referring to the XRSession.
Yes. MDN: beforexrselect bubbles, is cancelable, and is composed. Calling preventDefault() on the overlay (or a container) suppresses the following XR selectstart / select / selectend for that interaction.
Support is limited (not Baseline). Chromium-based browsers with WebXR DOM overlays are the typical path. Firefox and Safari generally lag. Always feature-detect and test on XR hardware.
overlay.addEventListener("beforexrselect", handler) or overlay.onbeforexrselect = handler. Listen on the DOM overlay element so bubbling can cover its UI tree.

Next: Element blur

Learn the event that fires when an element loses focus.

blur tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element beforescriptexecute Event JavaScript Element blur Event