| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.events</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.events'); |
| </script> |
| <link rel="stylesheet" href="css/demo.css"> |
| <style> |
| |
| html, body { |
| background-color: #FFF; |
| width: 100%; |
| height: 100%; |
| padding: 0px; |
| margin: 0px; |
| } |
| |
| |
| h1 { |
| font: normal 24px arial; |
| color: #009; |
| margin-top: 10px; |
| margin-left: 10px; |
| margin-right: 0px; |
| margin-bottom: 0px; |
| width: 450px; |
| } |
| |
| p { |
| font: normal 14px arial; |
| color: #999; |
| margin-top: 0px; |
| margin-left: 10px; |
| width: 450px; |
| } |
| |
| #tree ul { |
| font: normal 12px arial; |
| list-style: none; |
| margin: 0px; |
| padding:0px; |
| } |
| |
| #tree ul ul { |
| padding-left: 36px; |
| } |
| |
| html>body #tree span { |
| position: relative; |
| top: -2px; |
| } |
| |
| #tree div:hover { |
| background-color: #EEE; |
| } |
| |
| #tree { |
| width: 300px; |
| height: 800px; |
| border: 2px solid #EEE; |
| float: left; |
| } |
| |
| #log { |
| width: 400px; |
| height: 800px; |
| border: 2px solid #EEE; |
| border-left: 0px; |
| margin-top: 0px; |
| background-color: #FAFAFA; |
| } |
| |
| </style> |
| <script> |
| |
| var depth = 3; |
| var breadth = 2; |
| function writeTree(pos, preId) { |
| if (!pos) pos = 0; |
| |
| document.write('<ul id="ol' + (preId || '') + '">'); |
| |
| for (var i = 1; i <= breadth; i++) { |
| document.write('<li id="li-' + (preId || '') + i + '">'); |
| document.write('<div>'); |
| document.write('<input type="checkbox" id="chk1-' + (preId || '') + i + '" />'); |
| document.write('<input type="checkbox" id="chk2-' + (preId || '') + i + '" />'); |
| document.write('<span>'); |
| document.write((preId || '') + i); |
| document.write('</span></div>'); |
| if (pos < depth) writeTree(pos + 1, (preId || '') + i + '-'); |
| document.write('</li>'); |
| } |
| |
| document.write('</ul>'); |
| } |
| |
| |
| // Dirty little buffered log so that logging doesn't affect times. |
| var start = goog.now(); |
| var buffer = ''; |
| var timer = null; |
| function log(str) { |
| var time = ((new Date()).getTime() - start) / 1000; |
| buffer = '[' + time + '] ' + str + '\n' + buffer; |
| clearTimeout(timer); |
| timer = setTimeout(sendBuffer, 250); |
| } |
| |
| function sendBuffer() { |
| document.getElementById('log').value = buffer + |
| document.getElementById('log').value; |
| buffer = ''; |
| } |
| |
| |
| |
| function doLoad() { |
| if (arguments.callee.loaded) return; |
| arguments.callee.loaded = true; |
| |
| document.getElementById('log').value = ''; |
| log('LOADED'); |
| |
| log('Adding handlers'); |
| var lis = document.getElementById('tree').getElementsByTagName('li'); |
| for (var i = 0; i < lis.length; i++) { |
| //lis[i].addEventListener('mousedown', handleCapture, true); |
| //lis[i].addEventListener('mousedown', handleBubble, false); |
| goog.events.listen(lis[i], 'mousedown', handleCapture, true); |
| goog.events.listen(lis[i], 'mousedown', handleBubble, false); |
| } |
| log('Finished adding handlers'); |
| |
| |
| goog.events.listen(document.getElementById('log'), |
| 'dblclick', function() { this.value = ''; }); |
| } |
| |
| function handleCapture(e) { |
| if (e.target.tagName != 'INPUT') { |
| var id = e.currentTarget.id.replace(/li\-/, ''); |
| |
| if (document.getElementById('chk1-' + id).checked) { |
| e.stopPropagation(); |
| log('Capture - ' + id + ' [Cancelled]'); |
| } else { |
| log('Capture - ' + id); |
| } |
| } |
| } |
| |
| function handleBubble(e) { |
| if (e.target.tagName != 'INPUT') { |
| var id = e.currentTarget.id.replace(/li\-/, ''); |
| |
| if (document.getElementById('chk2-' + id).checked) { |
| e.stopPropagation(); |
| log('Bubble - ' + id + ' [Cancelled]'); |
| } else { |
| log('Bubble - ' + id); |
| } |
| } |
| } |
| |
| goog.events.listen(window, 'load', doLoad); |
| |
| </script> |
| </head> |
| <body> |
| <h1>goog.events - Stop Propagation</h1> |
| <p><strong>Test the cancelling of capture and bubbling events.</strong> Click |
| one of the nodes to see the event trace, then use the check boxes to cancel the |
| capture or bubble at a given branch. |
| (Double click the text area to clear it)</p> |
| |
| <div id="tree"> |
| <script>writeTree();</script> |
| </div> |
| |
| <textarea id="log"></textarea> |
| |
| </body> |
| </html> |
