javascript - Dispatch events using new MouseEvent directly to one target (avoiding the dom parents) -
i have wrapper, , 2 inner layers inside, 1 above another. normal behavior "downlayer" receive events.
i want send events "upperlayer", so... define eventlistener connected wrapper , dispatch mouseevent upperlayer
if dont connect listener can see how downlayer receive events.
however, if connect listener dispatch event have max stack error, because mouse event starts again "top" wrapper.
the fix have var 'eventlaunched' false / , true ..
is there other idea ?
<html> <body id="thebody" style="position:absolute; top:0; bottom:0; left:0; right:0;"> <div id="top" style="width:100%;height:100%;position: absolute;"> <div id="upperlayer" style="width: 100%;height:100%;border: 1px solid red;position: absolute;top: 0;left: 0;"> </div> <div id="downlayer" style="width:100%;float: none; height:100%;border: 1px solid blue;margin: 100px;position: absolute; top: 0;left: 0px;"> </div> </div> var id1=document.getelementbyid("top"); id1.addeventlistener("click", rise_event_to_upper, true); var id2_1=document.getelementbyid("upperlayer"); id2_1.addeventlistener("click", dosomethingupper, true); // capture phase var id2_2=document.getelementbyid("downlayer"); id2_2.addeventlistener("click", dosomething, true); var eventlaunched=false; function rise_event_to_upper(e) { if (eventlaunched==true) { eventlaunched=false; return;} eventlaunched=true; console.log("define & dispatch"); var evt = new mouseevent("click", { bubbles: false, cancelable: true, view: window, }); document.getelementbyid("upperlayer").dispatchevent(evt); } function dosomething(e) { console.log ("capture down"); } function dosomethingupper(e) { console.log ("capture upper"); } function dosomethingupper2(e) { console.log ("bubling"); e.stoppropagation(); } </body> </html>
you use mousedown event bind rise_event_to_upper function to.
https://jsfiddle.net/sukbxo02/
document.getelementbyid("top") .addeventlistener("mousedown", rise_event_to_upper, true); 
Comments
Post a Comment