Check the carefully before using this in production. This is an experimental technology Browser compatibility table The are a handy way to know when a user is close to a device. These events make it possible to react to such a change, for example by shutting down the screen of a smartphone when the user is having a phone call with the device close to their ear. proximity events Obviously, the API requires the device to have a proximity sensor, which are mostly available only on mobile devices. Devices without such a sensor may support those events but will never fire them. Note: Proximity Events When the device proximity sensor detects a change between the device and an object, it notifies the browser of that change. When the browser gets such a notification, it fires a for any change, and a event in the case of a more rough change. DeviceProximityEvent UserProximityEvent This event can be captured at the object level by using the method (using the or event name) or by attaching an event handler to the or properties. window addEventListener deviceproximity userproximity window.ondeviceproximity window.onuserproximity Once captured, the event object gives access to different kinds of information: The event provides an exact match for the distance between the device and the object through its property. It also provides the closest and farthest distance the device is able to detect something through its and properties. DeviceProximityEvent value min max The event provides a rough approximation of the distance, expressed through a boolean. The property is if the object is close or if the object is far. UserProximityEvent UserProximityEvent.near true false Example .addEventListener( , { (event.near) { navigator.mozPower.screenEnabled = ;
  } { navigator.mozPower.screenEnabled = ;
  }
}); window 'userproximity' ( ) function event if // let's power off the screen false else // Otherwise, let's power on the screen true Specifications Browser compatibility DeviceProximityEvent UserProximityEvent See also DeviceProximityEvent UserProximityEvent deviceproximity userproximity Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Proximity_Events Published under licence Open CC Attribution ShareAlike 3.0

Mozilla

Push API Guide: How to Send Push Message to Application

Pointer Lock API: How to Control Mouse Cursor

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Proximity Events Specification: How To Receive Events From Device Proximity Sensors

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps