jQuery off()在使用bind时不会解除绑定事件

ars1skjm  于 2023-08-04  发布在  jQuery
关注(0)|答案(6)|浏览(91)
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()的原因。

crcmnpdw

crcmnpdw1#

问题是this._click.bind()每次被调用时都会创建一个新函数。为了分离特定的事件处理程序,您需要传入用于创建事件处理程序的原始函数,而这里没有发生这种情况,因此处理程序不会被删除。
如果你的应用中只有几个bubble,你可以不使用this。这将消除很多关于this引用的混淆,并确保每个bubble保留对其自己的click函数的引用,该函数可用于根据需要删除事件:

function bubble(content, triggerElm) {
    var element = $('<div class="bubble" />').html(content);
    element.css(.....); // here is positioned based on triggerElm

    function click(event) {
        console.log('click', element);
        if (element.is(event.target) || 
            element.has(event.target).length > 0) {
            return true;
        }
        hide();
    }

    function show() {
        $(document).on('click', click);
        element.css(....);
    }

    function hide() {
        $(document).off('click', click);
        element.css(....);
    } 

    return {
        show: show,
        hide: hide
    };
}

var b1 = bubble(..., ...);
b1.show();

var b2 = bubble(..., ...);
b2.show();

字符串
看看这是如何使您从使用.bind()和下划线前缀方法这样的发明中解放出来的。

x7rlezfr

x7rlezfr2#

一个选项是namespace the event

$(document).on('click.name', test.bind(this));
$(document).off('click.name');

字符串
Example Here

3hvapo4f

3hvapo4f3#

尝试使用jQuery的代理来获取函数的唯一引用。
这样,当你调用$.proxy(test,this)时,它会检查这个函数是否已经被引用过。如果是,代理将返回该引用,否则它将创建一个并返回给您。这样,你就可以一直得到你的原始函数,而不是一遍又一遍地创建它(比如使用bind)。
因此,当你调用off(),并将测试函数的引用传递给它时,off()将从click事件中删除你的函数。
另外,测试函数应该在使用之前声明。

var test = function(){
      console.log('click');
};    

$(document).on('click', $.proxy(test, this));
$(document).off('click', $.proxy(test, this));

字符串
http://jsfiddle.net/aw50yj7f/

91zkwejq

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的引用。
如果你想做这样的事情:

var test = function(){
     console.log('click');
};

var newFunct = test.bind(this);
$(document).on('click', newFunct );
$(document).off('click', newFunct );

字符串
应该没问题
例如:http://jsfiddle.net/508dr0hv/
另外,不推荐使用bind,它的速度很慢,并且在某些浏览器中不支持。

bvjveswy

bvjveswy5#

而不是将其绑定到事件,将其作为参数发送:

$("#DOM").on("click",{
'_this':this
},myFun);

myFun(e){
 console.info(e.data._this);
$("#DOM").off("click",myFun);
}

字符串

xn1cxnb4

xn1cxnb46#

如果你在使用类的时候遇到了这个问题,我发现的一个替代方法是用绑定函数的赋值来替换处理程序定义:

//Replace this
onclick(e) {
    //...
}

//With this:
onclick = function(e) {
    //...
}.bind(this);

字符串
这不是很漂亮,但是如果您已经编写了代码,它确实保存了重构。

相关问题