Layer event propagation test.

by lddubeau

HTML

<div>
    <div>
        <p id="layer" contenteditable="false">This is text.</p>
        <p id="para" contenteditable="true">This is text.</p>
    </div>
    <div>
        <p id="log"></p>
    </div>
    <button id="toggle">Toggle Layer</button>
</div>

CSS

p {
    margin: 0px;
    padding: 0px;
}
#layer {
    position: absolute;
    z-index: 1;
    color: red;
}
#para {
}

JavaScript

$(function () {
    var layer = $("#layer")[0];
    var para = $("#para")[0];
    $("p").on("mousedown mouseup", function (ev) {
        $("#log").append(ev.target.id + " " + ev.type);
        $("#log").append("<br/>");

        if (ev.target === layer) {
            $(layer).css("display", "none");
            var new_e = $.Event(ev.type, ev);
            new_e.target = para;
            new_e.toElement = para;
            $(para).trigger(new_e);
            ev.preventDefault();
            $(layer).css("display", "");
        }
    });
    $("#toggle").click(function () {
        var now = $(layer).css("display");
        if (now !== "none") 
            $(layer).css("display", "none");
        else
            $(layer).css("display", "");
        return false;
    }).on("mouseup mousedown", false);
});