Skip to content
A set of tools for detecting click events fired outside an element.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli Initial Commit from Ember CLI v1.13.8 Oct 13, 2015
.eslintrc.js
.gitignore
.jshintrc
.npmignore Update to ember-cli@2.18.0 Mar 20, 2018
.travis.yml
.watchmanconfig
CHANGELOG.md
LICENSE.md
README.md
click-outside-logo.png
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-click-outside Build Status Ember Observer Score

A set of tools for detecting click events fired outside an element.

click outside logo

Installation

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

ember install ember-click-outside

Usage

As element modifier (recommended)

<div {{on-click-outside (action "someAction")}}>
  Your HTML...
</div>

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

As a component

<ClickOutside @onClickOutside={{action "someAction"}}>
  Your HTML...
</ClickOutside>
  ...
  actions: {
    // Called on click outside
    someAction(e /* click event object */) {

    },
  },
  ...

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

<ClickOutside @onClickOutside={{action "someAction"}} @exceptSelector=".some-selector">
  Your HTML...
</ClickOutside>

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

<ClickOutside @onClickOutside={{action "someAction"}} @eventType="mousedown">
  Your HTML...
</ClickOutside>

As a mixin

This is somewhat more advanced, but if that's fine, feel free:

Using ember-click-outside component mixin

Here is a simplified version of the implementation of the component above:

import Component from '@ember/component';
import { on } from '@ember/object/evented';
import { next } from '@ember/runloop';
import ClickOutsideMixin from 'ember-click-outside/mixin';

export default Component.extend(ClickOutsideMixin, {
  clickOutside(e) {
    this.get('onClickOutside')(e);
  },

  _attachClickOutsideHandler: on('didInsertElement', function() {
    next(this, this.addClickOutsideListener);
  }),

  _removeClickOutsideHandler: on('willDestroyElement', function() {
    this.removeClickOutsideListener();
  })
});

Note: You should almost always call this.addClickOutsideListener inside the next run loop when you want to set it up on didInsertElement. The reason for this is more often than not the component is rendered as a result of some user interaction, usually a click. If the component attached the outside click event handler in the same loop, the handler would catch the event and fire the callback immediately.

Note: If you need to override the didInsertElement and/or willDestroyElement lifecycle hooks, you must make sure to call this._super(...arguments) in them because the mixin implements them as well.

export default Component.extend(ClickOutsideMixin, {
  didInsertElement() {
    this._super(...arguments);

    // Something else you may want to run when the
    // element in inserted in the DOM
  },

  willDestroyElement() {
    this._super(...arguments);

    // Something else you may want to run when the
    // element in removed from the DOM
  }
});

Behavior

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

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

You can’t perform that action at this time.