Event Proxy

Block functions by Proxy

by Lamik

HTML

<div id="boxParent" onclick="console.log('parent Clicked')">
Parent
 <div id="box">
 box
 </div>
</div>

CSS

#box {
  width: 100px;
  height: 100px;
  background: green;
}

#boxParent {
  padding: 20px;
  background: blue;
}

JavaScript

// How to block stopPropagation event function (open chrome console)

box.onclick = (e) => {
	console.log('Box clicked');
  
  const p = new Proxy(e, {
    get(target, prop) {
    
      if (prop === 'stopPropagation') {
        return function() {
          console.log('Proxy code executed'); // your additional code
          target[prop].apply(target); // call original stop propagation 
        };
      }
      
      return ()=> target[prop].apply(target); // execute original function

    },
  });
  console.log({e: e.clientX});
  p.stopPropagation(); // prevent parent click
}