Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Clicked outside
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
clickOutside(event) {
const $target = Ember.$(event.target);
const clickedOutside = typeof $target.data('outside') !== 'undefined';
alert("Clicked outside: " + (clickedOutside ? "yes" : "no"));
},
},
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.outside {
background: yellow;
padding: 20px;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.inside {
background: white;
padding: 20px;
margin: 20px;
}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<div onclick={{action "clickOutside"}} class="outside" data-outside>
<div class="inside">
test
</div>
</div>
{
"version": "0.10.5",
"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.8.0",
"ember-data": "2.8.0",
"ember-template-compiler": "2.8.0",
"ember-testing": "2.8.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.