jquery를 사용하여 토글 영역 내의 요소를 토글하지 못하게하는 방법

Question

아래 코드에서 h2 요소를 사용하여 div 태그를 표시하거나 숨기려면 jquery 토글이 있습니다. 그 h2 안에는 클릭 할 수있는 이미지 (컨텍스트 메뉴 아이콘)가 있습니다. 컨텍스트 메뉴는 클릭 할 때 작동하지만, h2는 div의 표시/숨기기도 토글합니다. h2 태그 내의 아이콘에서 토글 기능을 취소 할 수있는 방법이 있습니까?

나는 h2 태그 위에 아이콘을 겹쳐서 재생하려했지만 내 디자인과 관련된 다른 복잡한 문제를 초래합니다. 또한 두 가지를 나란히 놓는 것도 옵션이 아닙니다.

감사합니다.

Answer 1

클릭 이벤트 (본질적으로 이 (가)에 바인딩 됨)이 DOM을 버블 링하여 대상 요소의 모든 조상에 대해 발사합니다.

$("h2 > img").click(function (evt) { 
    // Stop the event from bubbling up and firing the h2's handler 
    evt.stopPropagation(); 

    // Continue on with my code 
    showContextMenu(); 
});