Ember-click-outside NPM

ember-click-outside

A handy modifier for detecting click events fired outside an element.

Compatibility

Ember.js v3.4 or above
Embroider or ember-auto-import v2

If you're running ember-source <3.22, you need to install ember-destroyable-polyfill to get the modifier working.

If you're running ember-source <3.8, you need to install ember-modifier-manager-polyfill to get the modifier working.

Installation

From within your ember-cli project directory install the addon:

ember install ember-click-outside

Usage

<div {{on-click-outside this.someAction}}>
  Your HTML...
</div>

If you wish to exclude certain elements from counting as outside clicks, use the exceptSelector attribute:

<div {{on-click-outside this.someAction exceptSelector=".some-selector"}}>
  Your HTML...
</div>

You can listen for events other than click by using the eventType attribute:

<div {{on-click-outside this.someAction eventType="mousedown"}}>
  Your HTML...
</div>

How it works?

For every click in the document, ember-click-outside will check if the click target is outside of its element, and trigger the provided action/callback if so.

If the click target cannot be found in the document (probably because it has been removed before ember-click-outside detected the click), no action/callback is triggered, since we cannot check if it is inside or outside of the element.