Ember，mixin来检测视图/组件之外的点击 [英] Ember, mixin to detect click outside of view/component

问题描述

这是mixin：

  App.ClickElsewhereMixin = Ember.Mixin.create（{
 
 onClickElsewhere：Ember.K，
 
 didRender： function（）{
 this._super.apply（this，arguments）; 
 return $（document）.on（'click'，this.get（'onClickElsewhere'））; 
} ，
 
 willDestroyElement：function（）{
 this._super.apply（this，arguments）; 
 $（document）.off（'click'，this.get onClickElsewhere'））; 
}，
}）; 
  

我在我的组件中使用它：

  onClickElsewhere：function（）{
 this.send（'exitEditMode'）; 
}，
  

但是当我运行它，我得到：

  TypeError：this.send不是一个函数
  

如何保持这个上下文？

---

解决方案：

只是为了让读者更容易，这里是工作Mixin：

  App.ClickElsewhereMixin = Ember.Mixin.create（{
 
 onClickElsewhere：Ember.K，
 
 setupListener：Ember.on（'didRender' ，function（）{
 //设置当用户单击组件/视图之外时触发的事件
 return $（document）.on（'click'，$ .proxy（this.get （'onClickElsewhere'），
}）
 
 removeListener：Ember.on（'willDestroyElement'，function（）{
 //清除先前定义的事件保持事件堆栈清除
返回$（文档）.off（'click'，$ .proxy（this.get（'onClickElsewhere'），这个））; 
}），
} ）; 
  

解决方案

目前的答案不检查点击是否实际上在元素之外 - 点击组件也会触发回调。

这是一个更新版本：

 导出默认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）; 
 
返回Ember。$（document）.on（'click'，clickHandler）; 
}），
 
 removeOutsideClickListener：Ember.on（'willDestroyElement'，function（）{
 let clickHandler = this.get（'handleOutsideClick'）。bind（this ）; 
 
返回Ember。$（document）.off（'click'，clickHandler）; 
}）
}）; 
  

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

This is the mixin:

App.ClickElsewhereMixin = Ember.Mixin.create({

  onClickElsewhere: Ember.K,

  didRender: function() {
    this._super.apply(this, arguments);
    return $(document).on('click', this.get('onClickElsewhere'));
  },

  willDestroyElement: function() {
    this._super.apply(this, arguments);
    $(document).off('click', this.get('onClickElsewhere'));
  },
});

I use it in my component:

onClickElsewhere: function() {
    this.send('exitEditMode');
},

But when I run it, I get:

TypeError: this.send is not a function

How can I keep the this context?

---

Solution:

just to make it easier for the reader, here the working Mixin:

App.ClickElsewhereMixin = Ember.Mixin.create({

  onClickElsewhere: Ember.K,

  setupListener: Ember.on('didRender', function() {
    // Set an event that will be fired when user clicks outside of the component/view
    return $(document).on('click', $.proxy(this.get('onClickElsewhere'), this));
  }),

  removeListener: Ember.on('willDestroyElement', function() {
    // Clean the previously defined event to keep events stack clean
    return $(document).off('click', $.proxy(this.get('onClickElsewhere'), this));
  }),
});

解决方案

The current answer doesn't check whether the click was actually outside of the element – a click on the component will also trigger the callback.

Here's an updated version:

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', clickHandler);
  })
});

这篇关于Ember，mixin来检测视图/组件之外的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！