Stopping bubbling/propagation in Ember 2.x

Is there a proper way to stop bubbling in this scenario in Ember 2.18? I couldn't find an example that matched in the docs, but managed to find two other examples around the web. Both work, but one looks like it might be deprecated as I couldn't find references to it in the newest versions of Ember docs.

Scenario: I have a container. I want to click on it to expand/open it. Inside the container, I have a button. I want to click the button to close it. The general issue is that clicking the button to close also triggers the parent container's click event to open.

To solve, I believe I need to prevent bubbling/propagation when the button is clicked.

The two solutions I have found are as follows:

Solution #1:

event.stopPropagation();

Component 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();
    }
  }
});

Component HBS:

<button onclick=>Close</button>

Solution #2:

bubbles=false

Component 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
    }
  }
});

Component HBS:

<button >Close</button>

All feedback is appreciated. Thanks!