JavaScript Element beforexrselect Event

What You’ll Learn

The beforexrselect event fires before WebXR select / selectstart / selectend events. Learn how DOM overlays use it, why preventDefault() matters, how XRSessionEvent exposes session, and how to feature-detect support—with five examples and try-it labs.

Introduction

WebXR sessions can show a DOM overlay—HTML UI composited into the XR experience (menus, buttons, forms). When the user aims a controller or hand ray at that UI, you usually want normal DOM interaction, not a second “select” in the XR world.

beforexrselect is the bridge: it fires first, and if you cancel it on the overlay, the browser skips the XR selectstart / select / selectend sequence for that action. DOM pointer events still work separately.

Understanding beforexrselect

An instance event used with WebXR DOM overlays. It answers: “Is an XR select about to be generated for this interaction?”

• Fires before WebXR select events are dispatched.
• Bubbles, cancelable, composed (MDN).
• XRSessionEvent — read event.session.
• Purpose — suppress XR world input while using overlay UI.
• Status — Experimental; Limited availability (not Baseline).

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("beforexrselect", (event) => { });

onbeforexrselect = (event) => { };

Event type

An XRSessionEvent (inherits from Event).

Event properties

Event flags

MDN: the event bubbles, is cancelable, and is composed.

🔁 Overlay vs XR Select

1. User triggers a primary XR action aimed at the DOM overlay.
2. Browser fires beforexrselect on the intersected overlay target (bubbles).
3. If you call preventDefault(), XR select* events are suppressed for that sequence.
4. DOM UI events (such as pointer events) can still occur independently.

That separation avoids “double input”: clicking a menu button should not also select an object in the XR scene.

⚖️ beforexrselect vs XR select

Examples Gallery

Examples follow MDN Element: beforexrselect event. Full XR sessions need a headset or emulator; labs still teach registration, cancel, and detection patterns.

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

overlay.addEventListener("beforexrselect", (event) => {
  console.log("beforexrselect on overlay");
  console.log("bubbles:", event.bubbles, "cancelable:", event.cancelable);
});

Listener ready on #xr-overlay
(Event fires only during a WebXR DOM-overlay select)

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

overlay.onbeforexrselect = (event) => {
  console.log("onbeforexrselect fired");
};

// Assigning again replaces the previous handler.

Handler property assigned on #xr-overlay

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

// Effect (supporting browsers, during XR + DOM overlay):
// selectstart / select / selectend are not dispatched for this action.
// DOM UI interaction can continue without duplicate XR world input.

Overlay will call preventDefault() on beforexrselect
(Requires WebXR DOM overlay session to observe live)

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

overlay.addEventListener("beforexrselect", (event) => {
  const session = event.session;
  console.log("XRSession present:", !!session);
  // Optionally inspect session.renderState, inputSources, etc.
  event.preventDefault();
});

XRSession present: true

function isBeforeXrSelectLikelyAvailable() {
  return (
    "xr" in navigator &&
    ("onbeforexrselect" in window || "onbeforexrselect" in HTMLElement.prototype)
  );
}

console.log("WebXR navigator.xr:", "xr" in navigator);
console.log("beforexrselect likely:", isBeforeXrSelectLikelyAvailable());

if (isBeforeXrSelectLikelyAvailable()) {
  document.getElementById("xr-overlay")?.addEventListener("beforexrselect", (e) => {
    e.preventDefault();
  });
} else {
  console.log("Plan a non-overlay or non-XR UI fallback");
}

WebXR navigator.xr: true/false
beforexrselect likely: true/false

🚀 Common Use Cases

• Menus and settings panels inside a WebXR DOM overlay.
• Preventing XR world picks while pressing HTML buttons.
• Forms or confirmation dialogs composited over an immersive session.
• Teaching the difference between DOM pointer input and XR select input.
• Feature-gated XR UI that falls back when overlays are unsupported.

🔧 How It Works

📝 Notes

• MDN: Experimental and Limited availability (not Baseline).
• Not Deprecated or Non-standard — only the Experimental banner is shown.
• Bubbles / cancelable / composed — cancel on the overlay root for nested UI.
• DOM events and XR events are not synchronized; canceling XR select does not block DOM pointers.
• Related learning: beforescriptexecute, activeVRDisplays, addEventListener(), JavaScript hub.

💡 Best Practices