JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div class="mwPushButton mwWidgetDisabled" id="outer">        
      <span class="mwTextLine">I am disabled, but click on border triggers click event</span>      
  <div class="mwDisabledOverlayNode"></div>
</div>

CSS

.mwDisabledOverlayNode {
  top: -25px;
  right: -25px;
  bottom: -25px;
  left: -25px;
  display: block;
  position: absolute;
  background: red;

}

.mwWidgetDisabled {
  opacity: .35;
}

.mwPushButton {
  border-color: #999;
  border-style: solid;
  border-width: 5px;
  position: relative;
  overflow: hidden; /* this clips the disabled overlay node also */
}

JavaScript

(function() {

  var outerDomNode = document.getElementById('outer')

  var disabledDomNode = document.querySelector('.mwDisabledOverlayNode')
  disabledDomNode.addEventListener("click", function(e) {
    e.stopImmediatePropagation()
    e.preventDefault()
  })

  outerDomNode.addEventListener("click", function(e) {
    console.log(e)
  })
})()