Click EventListener does not work if the child element is disabled

Question

Target

I want the parent element to be clickable even though the child element is disabled.

Example Code

const parent = document.getElementById('parent');

parent.addEventListener('click', (e) => {
  console.log('hello world')
}, true);

<div id="parent">
  <input disabled placeholder="foo">
</div>

Important Note

@Drag13 had pointed out to me that it works in Chrome 96. It does not work in Firefox 95.0 on Linux OS.

Thanks in advance!

This might help: https://stackoverflow.com/a/32925830/17175441 — aerial, Dec 13 '21 at 08:10
@aerial301 The link is helpful. It shows some "hacks" to make it work in FF. It seems to be an old FF topic.But I didn't notice it until today. Merci! — Maik Lowrey, Dec 13 '21 at 08:22

Maik Lowrey · Accepted Answer · 2021-12-17T22:23:27.083

It is a Firefox problem and even an older one. In the Chrome browser, on the other hand, it works as expected. To get around the problem, you can use a little trick.

Add the CSS property: pointer-events:none; to the disbaled impunt field. This delegates the click to the parent element. The click is evaluated again in the parent element and should therefore work. Special thanks go to @aerial301.

const parent = document.getElementById('parent');

parent.addEventListener('click', (e) => {
  console.log('hello world, now it works :-)')
}, true);

input[disabled] {
    pointer-events:none;
}

<div id="parent">
  <input disabled placeholder="foo">
</div>

Still wouldn't work tho if you have the input floating. – connexo Dec 17 '21 at 09:35 — connexo, Dec 17 '21 at 09:35

Click EventListener does not work if the child element is disabled

1 Answers1