Andreas Hocevar
193 lines
4.0 KiB
HTML
193 lines
4.0 KiB
HTML
<!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>
|