| <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>Stop Event Propagation</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
| <script type="text/javascript" src="../base.js"></script> |
| <script type="text/javascript"> |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| </script> |
| |
| <style type="text/css"> |
| html, body { |
| } |
| |
| #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 type="text/javascript"> |
| |
| var depth = 3; |
| var bredth = 2; |
| function writeTree(pos, preid) { |
| if (!pos) pos = 0; |
| |
| document.write('<ul id="ol' + (preid || '') + '">'); |
| |
| for (var i = 1; i <= bredth; 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 = (new Date).getTime(); |
| var buffer = ''; |
| var timer = null; |
| function log(str) { |
| var time = ((new Date) - 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++) { |
| goog.events.listen(lis[i], goog.events.EventType.MOUSEDOWN, |
| handleCapture, true); |
| goog.events.listen(lis[i], goog.events.EventType.MOUSEDOWN, |
| handleBubble, false); |
| } |
| log('Finished adding handlers'); |
| |
| |
| goog.events.listen(document.getElementById('log'), |
| goog.events.EventType.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) { |
| log('Capture - ' + id + ' [Cancelled]'); |
| e.stop(); |
| } 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) { |
| log('Bubble - ' + id + ' [Cancelled]'); |
| e.stop(); |
| } else { |
| log('Bubble - ' + id); |
| } |
| } |
| } |
| |
| |
| goog.events.listen(window, goog.events.EventType.LOAD, doLoad); |
| |
| </script> |
| </head> |
| <body id="documentbody"> |
| <h1>Stop Event</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 type="text/javascript">writeTree();</script> |
| </div> |
| |
| <textarea id="log"></textarea> |
| |
| </body> |
| </html> |
