stopevent.html | Explore in Territory

<html>
<!--
Copyright 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>
chromium/third_party/google-closure-library/closure/goog/demos/stopevent.html
