Soy un novato en JS. Estoy construyendo una calculadora. Estoy usando la delegación de eventos para agregar detectores de eventos; sin embargo, hay un pequeño error. cuando hago clic en el botón de una calculadora, accedo a su html. Sin embargo, cuando accidentalmente hago clic en otro lugar, selecciono toda la Div. Cómo seleccionar solo los botones necesarios, a continuación se muestra mi código.

 <div class="calculator"> <div class="input" id="input"></div> <div class="buttons"> <div class="operators"> <div>+</div> <div>-</div> <div>&times;</div> <div>&divide;</div> </div> <div class="leftPanel"> <div class="numbers"> <div>7</div> <div>8</div> <div>9</div> </div> <div class="numbers"> <div>4</div> <div>5</div> <div>6</div> </div> <div class="numbers"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="numbers"> <div>0</div> <div>.</div> <div id="clear">C</div> </div> </div> <div class="equal" id="result">=</div> </div> </div>

A continuación se muestra el código JS que uso para agregar detectores de eventos.

 var number = document.querySelector(".leftPanel"); number.addEventListener("click", (event) => { console.log(event.target); Data = Data + event.target.innerHTML; // console.log(Data); input.innerHTML = globalNumber ? globalNumber + Data : Data; if (Data[Data.length - 1 === '+'] || Data[Data.length - 1 === '-']) { isOperator = true; } });

el destino del evento también selecciona todos los números dentro del div. ¿Cómo selecciono solo el botón y no todo el Div?