XRSession: squeeze event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The WebXR squeeze event is sent to an XRSession when one of the session's input sources has completed a primary squeeze action. Examples of common kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

For details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see Inputs and input sources.

Syntax

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

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

onsqueeze = (event) => {};

Event type

Event 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 users are squeezing the controller, making a hand gesture that mimes grabbing something, or using (squeezing) a trigger.

Use cases

The squeezestart event indicates that the user has begun a squeeze action.

If the primary squeeze action ends successfully, the session is sent a squeeze event.

A squeezeend event is sent to indicate that the squeeze action is no longer underway. This is sent whether the squeeze action succeeded or not.

Examples

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

This code treats the squeeze as an instantaneous action that doesn't involve tracking an ongoing activity. If you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends.

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

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

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

Specifications

Specification
WebXR Device API
# eventdef-xrsession-squeeze
WebXR Device API
# dom-xrsession-onsqueeze

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
squeeze event
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also