Question

如何在Polymer 3中调用onfocusout或onblur方法？当我单击菜单按钮时，单击事件完全正常，但是模糊或对焦不起作用？我要在有人单击外部菜单时关闭菜单吗？

static get properties() {
    return {
      _openMenu: Boolean
    };
  }

_toggleMenu(){
  this._openMenu= !this._openMenu;
}

_closeMenu(){
   this._openMenu= false;
}

我的按钮看起来像这样

<button on-click="${this._toggleMenu()}" on-blur="${this._closeMenu()}">

Answer 1

好的，我这样解决了我的问题。刚刚从我的按钮

中删除了点击和模糊事件

<button>Click</button>

在connectedCallBack（）上，我将eventListener添加到窗口对象，因此可以找出单击发生的位置。如果单击在菜单内部，则切换我的_openMenu；如果单击在菜单外部，则对_openMenu进行错误

connectedCallback() {
    super.connectedCallback();
    this._boundClickHandler = this._clickHandler.bind(this);
    window.addEventListener('click', this._boundClickHandler);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener('click', this._boundClickHandler);
  }

  _clickHandler(event) {
    let clickedInsideMenu = false;
    event.path.forEach((node) => {
      if (!clickedInsideMenu && node === this) {
        clickedInsideMenu = true;
      }
    });

    if (clickedInsideMenu) {
      this._toggleMenu();
    } else {
      this._openMenu= false;
    }
  }

Answer 2

这是因为on-blur和on-focusout尚未在Polymer库中定义。您可以检查现有的支持手势事件here。

您可以通过选择菜单add events imperatively然后向其中添加一个事件来进行操作。

聚合物3，聚焦或模糊事件

2 个答案: