Nested event experiments

by Andy Bulka

HTML

<div class="outer" id="outer">
  <div id="o1" class="o">
    <h3>o1</h3>
      <label><input type="checkbox" id="dobubble" checked=true/>bubble</label>
  </div>
  <div id="o2" class="o">
    <h3>o2</h3>
  </div>
</div>

<textarea rows="12" cols="60" id="out">
</textarea>
<a href="#" id="cleartext2">Clear</a>
<div id="log"></div>

CSS

.outer {width:150px; height:170px; background:yellow}
.o {width:70px; height:70px; background:beige}
#cleartext { display: block; }

JavaScript

function msg(s) {
    $('textarea')[0].value += s + '\n';
    $("textarea")[0].scrollTop = $("textarea")[0].scrollHeight;
}
$('#cleartext2').click(function() {
    $("#out").val("");
    $("#log").empty();
});

function report_div(s, target) {
    // reports id of closest enclosing div, just in case click on text
    msg(s + ': clicked on ' + $(target).closest('div')[0].id);
}

$("#o1").bind('click', function(e) {

    var $target = $(e.target);
    var propogate = $("#dobubble")[0].checked;

    if ($target.is("label,input")) {
        e.stopPropagation();
        $('<div/>').append('meta state change ' + $target[0].tagName + 
                           ' clicked').appendTo('#log');
        return;
    }

    report_div('o', e.target);
    
    if (!propogate) {
        //return false;  // preventDefault() - not what we want - or checkbox doesn't work
        e.stopPropagation();
    }
});

$(".outer").bind('click', function(e) {
    report_div('outer', e.target);
});