<div id="parent"> <div> <button onClick={() => console.log("a")}>a</button> </div> <button onClick={() => console.log("b")}>b</button> <button onClick={() => console.log("c")}>c</button> </div>Como arriba, tiene un elemento padre y un elemento hijo. En esta situación, ¿es posible evitar que se haga clic en el elemento secundario a través del elemento principal o evitar que se active el evento onclick del elemento secundario?
En la situación anterior, no se debe generar console.log sin importar en qué botón se haga clic.
Hay una manera de cubrir el elemento principal agregando otro elemento, pero tengo curiosidad por saber cómo evitarlo solo a través del elemento principal.
Asigne CSS pointer-events: none al padre, lo siguiente apuntará al primer <button> en la página:
document.querySelector('button').parentElement.style='pointer-events:none' Con el diseño específico de OP, esto funcionará para los tres <button> :
document.getElementById('parent').style='pointer-events: none'Además, el onclick en línea no funciona con las funciones de flecha normales, si realmente necesita usar el evento de flecha en línea, debe ser una vida :
<button onclick="(() => console.log('b')()">Realmente no hay necesidad de hacerlo, de hecho , los controladores de eventos en línea son basura, usan propiedades de un evento o detectores de eventos, lectura en eventos y delegación de eventos.
El siguiente ejemplo muestra una forma rápida para cada <button> en la página directamente.
document.querySelectorAll('button').forEach(btn => btn.style='pointer-events:none'); <div id="parent"> <div> <button onClick='console.log("a")'>a</button> </div> <button onClick='console.log("b")'>b</button> <button onClick='console.log("c")'>c</button> </div>Para JavaScript estándar, también hay una manera de evitar que los eventos secundarios se activen, incluso si están asignados de antemano.
Puede agregar un evento de clic al padre, configurar useCapture asignando el tercer parámetro a true en la función addEventListener y luego e.stopPropagation en el cuerpo de la función.
Esto asegurará que este evento se active antes de las fases normales del evento, por lo que todos sus eventos de clic secundarios no se activarán. También permite hacer clic en los botones y no alterará su apariencia.
document.querySelector('#parent').addEventListener('click', e => e.stopPropagation(), true); <div id="parent"> <div> <button onclick="console.log('a')">a</button> </div> <button onclick="console.log('b')">b</button> <button onclick="console.log('c')">c</button> </div>En el front-end, hay una biblioteca llamada "React". Tiene una función "UseState".
const [disabled, setDisabled] = useState(false); En este caso, puede establecer la variable en true
<button onClick={() => setDisabled(true)}>a</button>Haciendo click en el botón y donde quieras desactivarlo. poner
<button disabled={ disabled } onClick={() => console.log("b")}>b</button>