หยุดการทำ event ถัดไป กรณีมันซ้อนกันอยู่

กรณีดันมี event click ซ้อนกัน เช่น มีกล่อง (คลิ้กได้) แล้วมีปุ่มในกล่อง (คลิ้กได้) เช่นแบบตัวอย่างนี้

<div onClick={onDivClick}>
    <button onClick={onButtonClick}>Click</button>
</div>

ปัญหาคือ พอคลิ้กที่ปุ่ม มันก็ดันทำทั้ง onButtonClick และ onDivClick ซะงั้น , แล้วแก้ไงดี

ให้ใส่ stopPropagation() ที่ onButtonClick ซะครับ แล้วมันจะไม่ไปทำ event อื่นต่อ ดังตัวอย่าง

function onButtonClick (e) {
    e.stopPropagation()
}