Onclick이 있는 태그 위에 button이 정상 동작 안할 때

<div class="container1" th:each="patient : ${patients}">
                <tr href="#" th:onclick="|location.href='@{/patients/{id}/detail(id=${patient.id})}'|";>
                    <td th:text="${patient.getPatientName()}"></td>
                    <td th:text="${patient.birthday}"></td>
                    <td th:text="${patient.getGuardianPhoneNumber()}"></td>
                    <td th:text="${patient.getGender()}"></td>
                    <td>
                        <div class="dropdown" style="float:right">
                            <button class="btn btn-secondary dropdown-toggle" style="background-color: #3c6ffa"
                                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                    aria-expanded="false"
                                    onclick="event.stopPropagation();">
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                <li><a class="dropdown-item" href="#" onclick="event.stopPropagation();"
                                       th:href="@{/patients/{id}/edit (id=${patient.id})}">수정하기</a>
                                </li>
                                <li><a class="dropdown-item" href="#" onclick="event.stopPropagation();"
                                       th:href="@{/patients/{id}/delete (id=${patient.id})}">삭제하기</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>

            </div>

 

환자 테이블을 만들고 환자 태그중 아무곳이나 클릭해도 detail로 넘어가게 구현을 했는데

오른쪽 파란색 버튼이 태그에 겹쳐져 있어서 저 버튼을 눌러도 detail로 넘어가는 버그가 발생했다..

chat GPT,구글링을 통해 해결해보려고 했지만 쉽게 해결이 안됐다. 

onclick="event.stopPropagation();"

이 코드를 써보라는 글이 있었고 저걸 쓰니 첫번째 이벤트가 무시되고 잘 동작이 된걸 볼 수 있었따 !!