made with esnextbin
Last active
February 17, 2016 21:37
-
-
Save nissoh/dd6d0207f6fc726e7275 to your computer and use it in GitHub Desktop.
esnextbin sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ESNextbin Sketch</title> | |
| <!-- put additional styles and scripts here --> | |
| <style> | |
| div, span { | |
| box-sizing: border-box; | |
| position: relative; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: stretch; | |
| flex-shrink: 0; | |
| align-content: flex-start; | |
| border: 0 solid black; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .flex { | |
| flex: 1 | |
| } | |
| .stretch { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| left: 0; | |
| } | |
| .layout-center { | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- put markup and other contents here --> | |
| <div class="stretch layout-center" style="flex-direction: column;" touch-action="none"> | |
| <div>Open the console in developer tools: there are 2 event listeners attached.</div> | |
| <div>Both listeners are expected to log something.. but only the inner element is logged</div> | |
| <br> | |
| <div id="container"> | |
| <div style="overflow: auto;align-items: center; border: 1px dashed; width: 300px; height: 100px; padding:0 20px;"> | |
| <div style="flex-direction: column;" id="logEvents"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // write ES2015 code and import modules from npm | |
| // and then press "Execute" to run your program | |
| import most from 'handjs'; | |
| const container = document.querySelector('#container'); | |
| const containerChild = container.children[0]; | |
| const latestEvSpan = document.querySelector('#latestEv'); | |
| const logEventsElm = document.querySelector('#logEvents'); | |
| container.addEventListener('pointerenter', (evt) => { | |
| console.log(evt.target); | |
| const elm = document.createElement('div'); | |
| elm.appendChild(document.createTextNode('Container fired!')) | |
| logEventsElm.appendChild(elm); | |
| }); | |
| containerChild.addEventListener('pointerenter', (evt) => { | |
| console.log(evt.target); | |
| const elm = document.createElement('div'); | |
| elm.appendChild(document.createTextNode('Child fired!')) | |
| logEventsElm.appendChild(elm); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "esnextbin-sketch", | |
| "version": "0.0.0", | |
| "dependencies": { | |
| "handjs": "1.3.11" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var _handjs = require('handjs'); | |
| var _handjs2 = _interopRequireDefault(_handjs); | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | |
| var container = document.querySelector('#container'); // write ES2015 code and import modules from npm | |
| // and then press "Execute" to run your program | |
| var containerChild = container.children[0]; | |
| var latestEvSpan = document.querySelector('#latestEv'); | |
| var logEventsElm = document.querySelector('#logEvents'); | |
| container.addEventListener('pointerenter', function (evt) { | |
| console.log(evt.target); | |
| var elm = document.createElement('div'); | |
| elm.appendChild(document.createTextNode('Container fired!')); | |
| logEventsElm.appendChild(elm); | |
| }); | |
| containerChild.addEventListener('pointerenter', function (evt) { | |
| console.log(evt.target); | |
| var elm = document.createElement('div'); | |
| elm.appendChild(document.createTextNode('Child fired!')); | |
| logEventsElm.appendChild(elm); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment