function bubble(content, triggerElm){
this.element = $('<div class="bubble" />').html(content);
this.element.css(.....) // here is positioned based on triggerElm
}
bubble.prototype.show = function(){
$(document).on('click', this._click.bind(this));
this.element.css(....)
};
bubble.prototype.hide = function(){
$(document).off('click', this._click.bind(this));
this.element.css(....)
};
bubble.prototype._click = function(event){
console.log('click', this);
if(this.element.is(event.target) || (this.element.has(event.target).length > 0))
return true;
this.hide();
};
var b = new bubble();
b.show();
b.hide();
字符串
我在控制台中一直看到单击,因此单击不会解除绑定。但是如果我删除bind()
调用,则单击将被解除绑定。有人知道为什么吗?我需要一种方法来改变我的测试函数中的“this”,这就是我使用bind()
的原因。
6条答案
按热度按时间crcmnpdw1#
问题是
this._click.bind()
每次被调用时都会创建一个新函数。为了分离特定的事件处理程序,您需要传入用于创建事件处理程序的原始函数,而这里没有发生这种情况,因此处理程序不会被删除。如果你的应用中只有几个
bubble
,你可以不使用this
。这将消除很多关于this
引用的混淆,并确保每个bubble
保留对其自己的click
函数的引用,该函数可用于根据需要删除事件:字符串
看看这是如何使您从使用
.bind()
和下划线前缀方法这样的发明中解放出来的。x7rlezfr2#
一个选项是namespace the event:
字符串
Example Here的
3hvapo4f3#
尝试使用jQuery的代理来获取函数的唯一引用。
这样,当你调用$.proxy(test,this)时,它会检查这个函数是否已经被引用过。如果是,代理将返回该引用,否则它将创建一个并返回给您。这样,你就可以一直得到你的原始函数,而不是一遍又一遍地创建它(比如使用bind)。
因此,当你调用off(),并将测试函数的引用传递给它时,off()将从click事件中删除你的函数。
另外,测试函数应该在使用之前声明。
字符串
http://jsfiddle.net/aw50yj7f/
91zkwejq4#
请阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
bind创建了一个新的函数,因此执行
$(document).on('click', test.bind(this));
就像执行$(document).on('click', function(){});
一样,每次执行它都会调用一个新的匿名函数,因此您没有unbind的引用。如果你想做这样的事情:
字符串
应该没问题
例如:http://jsfiddle.net/508dr0hv/
另外,不推荐使用bind,它的速度很慢,并且在某些浏览器中不支持。
bvjveswy5#
而不是将其绑定到事件,将其作为参数发送:
字符串
xn1cxnb46#
如果你在使用类的时候遇到了这个问题,我发现的一个替代方法是用绑定函数的赋值来替换处理程序定义:
字符串
这不是很漂亮,但是如果您已经编写了代码,它确实保存了重构。