bind test

by Tenderfeel

HTML

<div class="big">
    <div class="medium">
        <div class="small">
        </div>
    </div>
</div>

CSS

.big {
    background-color:lightblue;
    height:300px;
    width:400px;
}
.medium {
    background-color:yellowgreen;
    height:200px;
    width:350px;
}
.small {
    background-color:yellow;
    height:100px;
    width:300px;
}

JavaScript

$('.medium').bind('mousedown', function(event){
    $(this).css('background-color', 'green');
    event.stopPropagation();//bigのmousedownを実行させない
});
$('.medium').bind('mouseup', function(event){
    $(this).css('background-color', 'yellowgreen');
    event.stopPropagation();//bigのmouseupを実行させない
});
$('.medium').bind('mouseleave', function(event){
    $(this).css('background-color', 'yellowgreen');
    event.stopPropagation();//bigのmouseleaveを実行させない
});

$('.big').bind('mousedown', function(event){
    $(this).css('background-color', 'blue');
});
$('.big').bind('mouseup', function(event){
    $(this).css('background-color', 'lightblue');
});
$('.big').bind('mouseleave', function(event){
    $(this).css('background-color', 'lightblue');
});