Как захватить событие клика по родительскому элементу, когда дочерний элемент отключен?

let span = document.querySelector('span');
let button = document.querySelector('button');
let div = document.querySelector('div');

if (button.disabled) {
  div.addEventListener('click', () => {
    alert('div clicked!');
  });
}

span.addEventListener('mousedown', (e) => {
  div.click();
});

button.addEventListener('click', (e) => {
  alert('button');
})

.myButton {
  margin: 0;
  padding: 0;
  width: 80px;
  height: 32px;
}

.mySpan {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 30px;
}

<div class = "myDiv">
  <button class = "myButton" disabled>
    <span class = "mySpan">button</span>
  </button>
</div>

document.getElementById('overlay').addEventListener('click', () => {
  // Handle the event as if the disabled button was clicked
  console.info('Overlay clicked, handling as if the disabled button was clicked.');
});

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: not-allowed;
}

/* Hide overlay when button is not disabled */
#myButton:not(:disabled)~#overlay {
  display: none;
}

<div id = "parentDiv" style = "position: relative;">
  <button id = "myButton" disabled>Disabled Button</button>
  <!-- Transparent overlay -->
  <div id = "overlay"></div>
</div>

for(var div of document.querySelectorAll('div')) {
 div.addEventListener('click', () => {
  console.info('The parent was clicked.');
 }, true);
}

for(var button of document.querySelectorAll('button')) {
 button.addEventListener('click', function() {
  if (this.classList.contains('disabled')) {
   console.info('The disabled button was clicked.');
  } else {
   console.info('The button was clicked.');
  }
 });
}

button {
 appearance: none;
 position: relative;
 border: 1px solid black;
 border-radius: 2px;
 background: #E8E8E8;
 color: #CCC;
 &:not(.disabled, [disabled]) {
  color: black;
  cursor: pointer;
  &:hover {
   background: #E0E0E0;
  }
  &:active {
   background: #F0F0F0;
  }
 }
}

<div>
 <button>Enabled Button</button>
 <button class='disabled'>My Button</button>
 <button disabled>Disabled Button></button>
</div>

const div = document.querySelector("div");
div.addEventListener("click", (evt) => {
  console.info("DIV CLICKED!"); // Works thanks to child SPAN emulating a DIV click
  // You can stop here. DIV finally registers the click.

  // If you want to further detect if a button was clicked
  // and get that actual button Element, use:
  const {clientX:x, clientY:y} = evt;
  const btn = document.elementsFromPoint(x, y).find(el => el.tagName === "BUTTON");
  if (btn) {
    console.info(btn);
  }
});

const spans = div.querySelectorAll("button[disabled] > span");
spans.forEach(btnSpan => {
  // Necessary since the DISABLED button prevents from propagating the Event
  btnSpan.addEventListener("click", (evt) => {
    div.click();
  });
});

* { margin: 0; box-sizing: border-box; }

button {
  appearance: none;
  padding: 0;
}

button span {
  display: block;
  padding: 0.5em 1em;
}

<div>
  <button disabled><span>Disabled with SPAN</span></button>
  <br>
  <button><span>Not Disabled with SPAN</span></button>
</div>

document.querySelectorAll("button").forEach((btn) => {
  const text = btn.firstChild; // {#text}
  const span = Object.assign(document.createElement("span"), {
    textContent: text.nodeValue
  });
  text.replaceWith(span);
});

button {
  appearance: none;
  padding: 0;
}
button > span {
  display: block;
  padding: 0.5em 1em;
  color: red;
}

<p>Example dynamically inserting SPAN into BUTTONs</p>
<button disabled>Button 1</button>
<button>Button 2</button>