Question

在Ember 2.18中有没有一种方法可以阻止这种情况下的冒泡？我找不到在文档中匹配的示例，但设法在网络上找到另外两个示例。两者都有效，但看起来它可能已被弃用，因为我在最新版本的Ember文档中找不到对它的引用。

方案：我有一个容器。我想点击它来展开/打开它。在容器内，我有一个按钮。我想点击按钮关闭它。一般问题是单击按钮关闭也会触发父容器的单击事件打开。

要解决这个问题，我相信在点击按钮时我需要防止冒泡/传播。

我找到的两个解决方案如下：

解决方案＃1：

event.stopPropagation（）;

组件JS：

import Component from '@ember/component';

export default Component.extend({
  tagName: "section",
  classNames: ["Container"],
  classNameBindings: ['isOpen:Container--open'],
  isOpen: false,

  click() {
    if (!this.get('isOpen')) {
      this.send('openContainer');
    }
  },

  actions: {
    openContainer() {
      this.toggleProperty('isOpen');
      // JS removed for demo
    },

    closeContainer(event) {
      this.toggleProperty('isOpen');
      // JS removed for demo
      event.stopPropagation();
    }
  }
});

组件HBS：

<button onclick={{action 'closeContainer'}}>Close</button>

解决方案＃2：

气泡=假

组件JS：

import Component from '@ember/component';

export default Component.extend({
  tagName: "section",
  classNames: ["Container"],
  classNameBindings: ['isOpen:Container--open'],
  isOpen: false,

  click() {
    if (!this.get('isOpen')) {
      this.send('openContainer');
    }
  },

  actions: {
    openContainer() {
      this.toggleProperty('isOpen');
      // JS removed for demo
    },

    closeContainer() {
      this.toggleProperty('isOpen');
      // JS removed for demo
    }
  }
});

组件HBS：

<button {{action 'closeContainer' bubbles=false}}>Close</button>

感谢所有反馈。谢谢！

Answer 1

你走在正确的轨道上。

以下是处理事件冒泡的当前Ember 2.18方法。

// No bubbling
import Component from '@ember/component';

export default Component.extend({
  doubleClick() {
    alert('DoubleClickableComponent was clicked!');
  }
});

// Allow bubbling
import Component from '@ember/component';
import Ember from 'ember';

export default Component.extend({
  doubleClick() {
    Ember.Logger.info('DoubleClickableComponent was clicked!');
    return true;
  }
});

Ember Guides Handling Events

使用bubbles=false的第二个解决方案在Ember 2.18中仍然可以接受。见事件传播。

Template Helper Method Action

再次，我对误读你的问题表示道歉。

在Ember 2.x中停止鼓泡/传播

1 个答案: