Quiero implementar un estado de carga donde cuando hacemos clic en el botón, hacemos que la opacidad del contenedor sea .32 y no deberíamos poder hacer clic o seleccionar los elementos dentro del contenedor. En el siguiente ejemplo, aún se puede hacer clic en la etiqueta a interna y seleccionarla después de que se muestre la carga.
const container = document.getElementById('container'); const btn = document.getElementById('load'); btn.addEventListener('click', () => { container.classList.add('loading'); }) #container { width: 300px; height: 300px; background: tomato; } .loading { opacity: .32; user-select: none; } <div id="container"> <a href="www.google.com">Test</a> <a href="www.google.com">Test</a> <a href="www.google.com">Test</a> <a href="www.google.com">Test</a> </div> <button id="load"> Load </button>¿Ha considerado el uso pointer-events: none; de CSS? Vea el fragmento de ejecución a continuación.
const container = document.getElementById('container'); const btn = document.getElementById('load'); btn.addEventListener('click', () => { container.classList.add('loading'); }) #container { width: 300px; height: 300px; background: tomato; } .loading { opacity: .32; user-select: none; pointer-events: none; } <div id="container"> <a href="www.google.com">Test</a> <a href="www.google.com">Test</a> <a href="www.google.com">Test</a> <a href="www.google.com">Test</a> </div> <button id="load"> Load </button>Creo que lo que estás tratando de hacer es deshabilitar la etiqueta de anclaje. Para esto, simplemente puede usar la siguiente propiedad en el CSS: pointer-events: none; .
Con esto, incluso si se hace clic en la etiqueta de anclaje, no pasará nada.