Ember,mixin来检测视图/组件之外的点击 [英] Ember, mixin to detect click outside of view/component
本文介绍了Ember,mixin来检测视图/组件之外的点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是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屋!
查看全文