Objetivo
Quiero que se pueda hacer clic en el elemento principal aunque el elemento secundario esté deshabilitado.
Código de ejemplo
const parent = document.getElementById('parent'); parent.addEventListener('click', (e) => { console.log('hello world') }, true); <div id="parent"> <input disabled placeholder="foo"> </div>Nota IMPORTANTE
@ Drag13 me había señalado que funciona en Chrome 96 . No funciona en Firefox 95.0 en el sistema operativo Linux.
¡Gracias por adelantado!
Es un problema de Firefox e incluso uno más antiguo. En el navegador Chrome, por otro lado, funciona como se esperaba. Para solucionar el problema, puedes usar un pequeño truco.
Agregue la propiedad CSS: pointer-events:none; al campo impunt desbalado. Esto delega el clic al elemento principal. El clic se evalúa nuevamente en el elemento principal y, por lo tanto, debería funcionar. Un agradecimiento especial a @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>