Restricted propagation vs. Natural propagation

In response to StackOverflow question: http://stackoverflow.com/questions/26052442/jquery-when-mousedown-on-child-object-trigger-only-parent-object-not-child

by Gerald Fullam

HTML

<div class="wrapper">
    <h2>Restricted<br />propagation</h2>
    <div class="parent">
        <div class="restricted child"></div>
    </div>
    <p>Restricted child's event is halted, but the parent event is triggered manually.</p>
</div>

<div class="wrapper">
    <h2>Natural<br />propagation</h2>
    <div class="parent">
        <div class="child"></div>
    </div>
    <p>Unrestricted child's event will fire and the parent event is fired naturally.</p>
</div>

CSS

.wrapper {
    position: relative;
    float: left;
    width: 200px;
    margin: 10px;
}

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    transition: all 1s ease-out;
    background-color: ForestGreen;
}

.child {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    transition: all 1s ease-out;
    background: DodgerBlue;
}

.parent-alt {
    border-radius: 200px;
    background-color: Plum;
}

.child-alt {
    border-radius: 100px;
    background-color: Chocolate;
}

h2 {
    margin: 0 0 10px 0;
    font-family: 'Arial Narrow', Arial, sans-serif;
    line-height: 1em;
}

p {
    font-family: Tahoma, Verdana, Segoe, sans-serif;
}

JavaScript

$(".restricted.child").on('mousedown', function (e) {
    e.stopImmediatePropagation();
    $(this).closest(".parent").trigger('mousedown');
});

$(".child").on('mousedown', function (e) {
    $(this).toggleClass('child-alt');
});

$(".parent").on('mousedown', function (e) {
    $(this).toggleClass('parent-alt');
});