XRSession: select event
=======================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The WebXR **`select`** event is sent to an `XRSession` when one of the session's input sources has completed a primary action.

The `beforexrselect` is fired before this event and can prevent this event from being raised.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("select", (event) => {});

onselect = (event) => {};
```

Event type
----------

An `XRInputSourceEvent`. Inherits from `Event`.

Event

XRInputSourceEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`frame` Read only 

An `XRFrame` object providing the needed information about the event frame during which the event occurred. This frame may have been rendered in the past rather than being a current frame. Because this is an *event* frame, not an *animation* frame, you cannot call `XRFrame.getViewerPose()` on it; instead, use `getPose()`.

`inputSource` Read only 

An `XRInputSource` object indicating which input source generated the input event.

Description
-----------

### Trigger

Triggered when a user presses triggers or buttons, taps a touchpad, speaks a command or performs a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

### Use cases

The `selectstart` and `selectend` events tell you when you might want to display something to the user indicating that the primary action is going on. This might be drawing a controller with the activated button in a new color, or showing the targeted object being grabbed and moved around, starting when `selectstart` arrives and stopping when `selectend` is received.

The `select` event tells your code that the user has completed an action. This might be as simple as throwing an object or pulling the trigger of a gun in a game, or as involved as placing a dragged object at a new location.

If your primary action is a simple trigger action and you don't need to animate anything while the trigger is engaged, you can ignore the `selectstart` and `selectend` events and act on the start event.

Examples
--------

The following example uses `addEventListener()` to set up a handler for the `select` event. The handler fetches the pose representing the target ray for `tracked-pointer` inputs and sends the pose's transform to a function called `myHandleSelectWithRay()`.


```js
xrSession.addEventListener("select", (event) => {
  if (event.inputSource.targetRayMode === "tracked-pointer") {
    let targetRayPose = event.frame.getPose(
      event.inputSource.targetRaySpace,
      myRefSpace,
    );
    if (targetRayPose) {
      myHandleSelectWithRay(targetRayPose.transform);
    }
  }
});
```


You can also set up a handler for `select` events by setting the `XRSession` object's `onselect` event handler property to a function that handles the event:


```js
xrSession.onselect = (event) => {
  if (event.inputSource.targetRayMode === "tracked-pointer") {
    let targetRayPose = event.frame.getPose(
      event.inputSource.targetRaySpace,
      myRefSpace,
    );
    if (targetRayPose) {
      myHandleSelectWithRay(targetRayPose.transform);
    }
  }
};
```

Specifications
--------------

| Specification |
| --- |
| WebXR Device API # eventdef-xrsession-select |
| WebXR Device API # dom-xrsession-onselect |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `selectstart` and `selectend`
* `beforexrselect`