javascript - 通过 $.proxy() 将类方法绑定(bind)到 Click 事件

Question

我在这里阅读了关于此主题的另一篇文章，并尝试了解决方案(使用 $.proxy())，但它在我的代码中无法按预期工作。它只是在页面加载后立即执行，并且当我单击该元素时不会触发单击事件。

/**
 * menu-slider.js
 * Written by: Jay Simons
 * Cloudulus.Media (https://code.cloudulus.media)
 */
class menuSlider
{
    constructor(id, maxWidth)
    {
        this.id = id;
        this.ele = $("#"+id);
        this.maxWidth = maxWidth;
        this.menuWidth = this.ele.width();
        this.winWidth = $(document).width();

        this.calc();
        $(window).resize(this.calc());
    }

    calc()
    {
        this.menuWidth = this.ele.width();
        this.winWidth = $(document).width();

        if (this.winWidth <= this.maxWidth)
        {
            this.ele.css("margin-right", -this.menuWidth+"px");
            this.ele.append('<div id="menu-slider-btn"><i class="fas fa-bars"></i></div>');
            $("#menu-slider-btn").css('position', 'absolute').css('top', 0).css('left', -$("#menu-slider-btn").width()+'px')
                .css("box-shadow", "none").css('color', 'white');
            $("#menu-slider-btn").click($.proxy(this.toggle(), this));
        }
    }

    toggle()
    {
        if(this.ele.css("margin-right") == -this.menuWidth+"px" && !this.ele.is(':animated'))
        {
            this.ele.show();
            this.ele.animate({"margin-right": '+='+this.menuWidth}).addClass("active");
        }
        else
        {
          if(!this.ele.is(':animated'))
          {
              this.ele.animate({"margin-right": '-='+this.menuWidth}).removeClass("active");
          }
        }
    }
}

Answer 1

您调用成员函数并传递它们的返回值，而不是将它们传递给事件处理程序。更改这些:

$(window).resize(this.calc());
$("#menu-slider-btn").click($.proxy(this.toggle(), this));

致这些:

$(window).resize($.proxy(this.calc, this));
$("#menu-slider-btn").click($.proxy(this.toggle, this));