JavaScript로 이벤트 버블링 방지 예제 Sharing_javascript 기술

이전에도 이벤트 버블링 문제가 있어서 온라인으로 검색해봤는데 대부분 같은 코드였고 포스팅할 때 원활하지 않더군요. FF의 경우 e.stopPropagation();을 사용할 수 있는데, 저는 어떻게든 성공하지 못했습니다. 하지만 테스트 결과 FF에서는 e.cancelBubble = true; 쓰기 방식을 지원하는 것으로 나타났는데, 이는 테스트 결과 가능했습니다. 나중에 코드를 찾을 필요가 없도록 여기에 코드를 게시하세요. 이전 버전의 IE와의 호환성은 아직 테스트되지 않았습니다. 사용 시 개선될 예정입니다.

코드 복사 코드는 다음과 같습니다.

//이벤트 버블링 취소
함수 stopBubble(e) {
var evt = (e) ? e : window.event;//FF와 호환 가능
evt.cancelBubble = true; //evt.stopPropagation(); FF에서 버블링을 방지하려면
을 사용하면 된다고 합니다. };

또한:

1. cancelBubble(HTML DOM 이벤트 객체 속성): 이벤트 핸들러가 이벤트가 포함 객체로 전파되는 것을 방지하려면 이 속성을 true로 설정해야 합니다.

2. stopPropagation(HTML DOM 이벤트 객체 메소드): 종료 이벤트는 전파 프로세스의 캡처, 대상 처리 또는 버블링 단계에서 추가로 전파됩니다. 이 메서드를 호출하면 이 노드의 이벤트 핸들러가 호출되고 이벤트는 더 이상 다른 노드로 전달되지 않습니다.

3. PreventDefault(HTML DOM 이벤트 객체 메소드)는 이벤트와 관련된 기본 작업을 수행하지 않도록 브라우저에 알립니다.

예:
함수 stopBubble(e)
{ 
If (e && e.stopPropagation)
e.stopPropagation()
        그 외
               window.event.cancelBubble=true
}  

이벤트 버블링을 방지하고 싶은 함수에 이 stopBubble(e) 함수를 넣어서 이벤트 버블링을 방지하세요