Created
October 21, 2014 04:48
-
-
Save ekashida/10fadb05d8d706639119 to your computer and use it in GitHub Desktop.
Events dispatched by Good Guy Mobile Safari on almost-clicks
This file contains 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
| div { | |
| padding: 20px 0; | |
| margin: 5px 0; | |
| background-color: lightgreen; | |
| outline: 1px solid blue; | |
| display: inline-block; | |
| } | |
| a { | |
| background-color: yellow; | |
| } |
This file contains 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"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Events dispatched by Good Guy Mobile Safari on almost-clicks</title> | |
| </head> | |
| <body> | |
| <p>Check the Mobile Safari console!</p> | |
| <p>Events dispatched by tapping on each link (yellow area) are expected.</p> | |
| <p>Events dispatched by tapping just outside each link (green area) are caused by Good Guy Safari.</p> | |
| <div> | |
| <a href=https://search.yahoo.com id=delegated> | |
| Delegated handlers only | |
| </a> | |
| </div> | |
| <div> | |
| <a href=https://search.yahoo.com id=direct> | |
| Direct handlers only | |
| </a> | |
| </div> | |
| <div> | |
| <a href=https://search.yahoo.com id=both> | |
| Both delegated and direct handlers | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| var delegated = document.querySelector('#delegated'); | |
| var direct = document.querySelector('#direct'); | |
| var both = document.querySelector('#both'); | |
| var body = document.querySelector('body'); | |
| ['touchstart', 'touchend', 'click'].forEach(function (eventName) { | |
| // Direct subscription of event handlers | |
| direct.addEventListener(eventName, function (el) { | |
| console.log('[#direct] Direct ' + eventName + ' handler'); | |
| }); | |
| both.addEventListener(eventName, function (el) { | |
| console.log('[#both] Direct ' + eventName + ' handler'); | |
| }); | |
| // Delegated subscription of event handlers | |
| body.addEventListener(eventName, function (el) { | |
| if (el.target.id === 'both') { | |
| console.log('[#both] Delegated ' + eventName + ' handler'); | |
| } | |
| else if (el.target.id === 'delegated') { | |
| console.log('[#delegated] Delegated ' + eventName + ' handler'); | |
| } | |
| }); | |
| }); | |
| body.addEventListener('click', function (el) { | |
| // Prevent navigation | |
| el.preventDefault(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment