Ember, mixin to detect click outside of view/component

Question

I\'m writing a Mixin to handle when user clicks outside of a view/component.

This is the mixin:

App.ClickElsewhereMixin = Ember.Mixin.create({

  onC         


        

Answer 1

Greg answer have a mistake, that makes removing the clickHandler event not working. Which means that your clickevent will fire even if you destroy the component.

Here is proper version

import Ember from 'ember';

export default Ember.Mixin.create({
    onOutsideClick: Ember.K,

  handleOutsideClick: function(event) {
    let $element = this.$();
    let $target = $(event.target);

    if (!$target.closest($element).length) {
      this.onOutsideClick();
    }
  },

  setupOutsideClickListener: Ember.on('didInsertElement', function() {

    let clickHandler = this.get('handleOutsideClick').bind(this);

    return Ember.$(document).on('click', clickHandler);
  }),

  removeOutsideClickListener: Ember.on('willDestroyElement', function() {

    let clickHandler = this.get('handleOutsideClick').bind(this);

    return Ember.$(document).off('click', Ember.run.cancel(this, clickHandler));
  })
});