Skip to content

Instantly share code, notes, and snippets.

@courthead
Created November 20, 2015 23:12
Show Gist options
  • Save courthead/acd757144a86b00e3b81 to your computer and use it in GitHub Desktop.
Save courthead/acd757144a86b00e3b81 to your computer and use it in GitHub Desktop.
action bubbling weirdness
import Ember from 'ember';
export default Ember.Controller.extend({
appName:'Ember Twiddle',
actions: {
reportClick(element) {
alert(element);
}
}
});
<h1>Welcome to {{appName}}</h1>
<div class="outer-el" onclick={{action (action "reportClick" "A outer")}}>
A (both have "onclick")
<div class="inner-el" onclick={{action (action "reportClick" "A inner") bubbles=false}}>*</div>
</div>
<div class="outer-el" onclick={{action (action "reportClick" "B outer")}}>
B (outer has "onclick")
<div class="inner-el" {{action (action "reportClick" "B inner") bubbles=false}}>*</div>
</div>
<div class="outer-el" {{action (action "reportClick" "C outer")}}>
C (inner has "onclick")
<div class="inner-el" onclick={{action (action "reportClick" "C inner") bubbles=false}}>*</div>
</div>
<div class="outer-el" {{action (action "reportClick" "D outer")}}>
D (no onclick)
<div class="inner-el inner-el--d" {{action (action "reportClick" "D inner") bubbles=false}}>*</div>
</div>
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.outer-el {
border-radius: 3px;
border: 1px solid black;
background: hsl(0, 0%, 90%);
cursor: pointer;
display: inline-block;
padding: 10px;
margin-top: 12px;
}
.outer-el:hover {
background: hsl(0, 0%, 98%);
}
.inner-el {
border-radius: 3px;
background: hsl(0, 100%, 50%);
color: white;
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.inner-el:hover {
background: hsl(0, 100%, 40%);
}
.inner-el--d {
background: hsl(100, 100%, 40%);
}
.inner-el--d:hover {
background: hsl(100, 100%, 30%);
}
{
"version": "0.4.16",
"EmberENV": {
"FEATURES": {}
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.1.0",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
"ember-template-compiler": "2.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment