イベントの伝播テスト

ステートフルJavaScriptを見ながら

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer{
    padding:50px;
    background:#000;
}
#inner{
    padding:50px;
    background:#c00;
}

JavaScript

$(function(){
    var clickHandler = function(e){
        e.preventDefault(); // prevent default action
        e.stopPropagation(); // stop propagation
        console.log(e.target);
    };
    var $outer = $('#outer');
    var $inner = $('#inner');
    $outer.click(clickHandler);
    $inner.click(clickHandler);
});