JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top" style="width: 100%; height:100%;"> 
            <div id="UpperLayer" style="width: 100%; height:100%;border: 1px solid red;position: absolute;top: 0;left: 0;">
              <div id="UpperLayer2" style="width: 100%; height:100%;border: 1px solid green; margin: 50px; position: absolute;top: 0;left: 0;">
            </div>
            <div id="DownLayer" style="width: 100%; height:100%;border: 1px solid blue;margin: 100px;position: absolute; top: 0;left: 0px;"></div>
        </div>

JavaScript

document.getElementById("top")
        	.addEventListener("mousedown", rise_event_to_upper, true);

        document.getElementById("UpperLayer")
        	.addEventListener("click", doSomethingUpper, true);
        document.getElementById("UpperLayer2")
        	.addEventListener("click", doSomethingUpper2, true);
        document.getElementById("DownLayer")
        	.addEventListener("click", doSomethingDown, true);

        function rise_event_to_upper(e) {
            console.log("define & dispatch: "+e.eventPhase);
            var evt = new MouseEvent("click", {
                bubbles: false,
                cancelable: true,
                view: window,
            });
            document.getElementById("UpperLayer").dispatchEvent(evt);      
        }
        function doSomethingDown(e) {  
            console.log ("capture down: "+e.eventPhase);
        }
        function doSomethingUpper(e) {                 
            console.log ("capture upper: "+e.eventPhase);
        }
        function doSomethingUpper2(e) {                 
            console.log ("capture upper2: "+e.eventPhase);
        }