accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
172 lines (138 loc) • 4.28 kB
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>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>