JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div class="outer">
  <div class="inner">
    Click anywhere in this box
  </div>
  <div class="overlay">
  </div>
</div>
<div class="log">
</div>

CSS

.outer,
.inner {
  position: relative;
  width: 200px;
  height: 200px;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid black;
}

.inner {
  background: rgba(255, 244, 0, 0.5);
}

.overlay {
  opacity: 0.5;
}

JavaScript

// Demonstrate intercept and forward mouse-events

  (function() {

    var outerDom = document.querySelector(".outer");
    var innerDom = document.querySelector(".inner");
    var overlayDom = document.querySelector(".overlay");
    var logDom = document.querySelector(".log");

    function logger(evt) {
      console.log(evt)
    }
    // 1. Overlay intercepts mouse-clicks

    overlayDom.addEventListener("click", function(evt) {

      //2. process evt
      logger(evt)

      if (evt.isTrusted) {
        forwardEvent(evt);
      }

    })



    document.addEventListener("click", logger)

    function forwardEvent(evt) {
      evt.stopPropagation();

      var eventdata = {
        "view": window,
        "bubbles": true,
        "cancelable": true,
        "pageX": event.pageX,
        "pageY": event.pageY,
        "shiftKey": event.shiftKey,
        "ctrlKey": event.ctrlKey
      };

      var newEvent = new MouseEvent(event.type, eventdata);

      // 3. forward event 
      innerDom.dispatchEvent(newEvent);
    }



  }())