eventPropagation

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  options: [1,2,3,4],
  
  actions: {
    divClicked() {
      console.log('div clicked');
    },
    
    selectValue(event) {
      console.log(event);
      this.set('selectedValue',event.target.value);
    },
    
    selectValue2(event) {
      console.log(event);
      this.set('selectedValue2',event.target.value);
    },
    
    stopPropagation(event) {
      console.log('select clicked will propagate to div for first select; but not for second select. You need to use event.stopPropagation() for closure actions!!! bubles=false only works for actions in element space!!!');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{my-component}}
<br>
<br>

templates.components.my-component.hbs

{{yield}}
<div {{action 'divClicked'}}>
  Deneme
  <br>
  Deneme2<br><br>
  <select onchange={{action "selectValue"}} onclick={{action 'stopPropagation' bubbles=false}}>
    <option class="default-option" disabled selected value>-</option>
    {{#each options as |valueChoice|}}
       <option value={{valueChoice}} selected={{eq selectedValue valueChoice}}>{{valueChoice}}</option>
     {{/each}}
  </select>
  <br>
  <br>
    <select onchange={{action "selectValue2"}} {{action 'stopPropagation' on='click' bubbles=false}}>
    <option class="default-option" disabled selected value>-</option>
    {{#each options as |valueChoice|}}
       <option value={{valueChoice}} selected={{eq selectedValue2 valueChoice}}>{{valueChoice}}</option>
     {{/each}}
  </select>
</div>

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
  	"ember-truth-helpers": "1.2.0"
  }
}