event.cancelBubble과 event.stopPropagation()_jquery의 차이점 소개

우선 인터넷에서 일반적으로 두 가지(잘못된) 보기로 나뉘는 기사를 많이 보았습니다.
1. cancelBubble은 IE에서 버블링 이벤트를 방지하는 데 사용되며 event.stopPropagation()은 다음과 같은 다른 브라우저에서 사용됩니다. 파이어폭스와 크롬.
위의 내용이 옳고 그름을 논하지 말자
예를 살펴보자: (테스트 환경: chrom5.0.275.7, moz3.6.4, Opera10.53, ie6,7,8)

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

환// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





<script> <BR>함수 clickBtn(event) <BR>{ <BR>event=event?event:window.event <BR>event.cancelBubble=true <BR>alert(event.cancelBubble; ); <BR> } <BR></script>

테스트됨:
a,chrom5.0.275. 7, Opera10.53, ie6,7,8 이러한 브라우저에서는 cancelBubble이 효과적이며 이벤트가 버블링되어 본문의 onclick이 트리거될 수 없도록 방지할 수 있습니다. 버튼 클릭만 발생
alert(event.cancelBubble); 출력 결과는 true
b. moz3.6.4 버전에서는 본문의 onclick을 방지할 수 없지만 경고 결과가 출력됩니다. (event.cancelBubble);은 여전히 ​​true입니다. 제 생각엔 event.cancelBubble이 이벤트에 속성을 추가하고 이를 true로 할당하면 됩니다.
js 코드가 다음과 같이 변경되면:

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

효과적으로 차단할 수 있습니다. 물론, chrome 및 Opera의 event.stopPropagation();도 유효합니다.
결론 1: 위의 내용은 event.cancelBubble이 이미 새 버전의 chrome 및 Opera 브라우저에서 지원된다는 것을 보여줍니다. 실제로는 moz만 없습니다. , 저는 개인적으로 event.cancelBubble이 event.stopPropagation()보다 낫다고 생각합니다. 영어적인 의미에서도 그렇죠. 그래서 moz가 새로운 버전을 출시하고 지원해주기를 바랍니다. 이는

2와도 호환됩니다. 이벤트 순서에 대해 자주 묻는 질문도 있습니다.
완전히 정확하지 않은 결론(제 생각에는)
예: 소스 이벤트 요소->>상위 요소 이벤트-> ;>body-->>document
moz: 다른 브라우저가 위와 반대가 될 때까지 기다립니다.
먼저 예를 살펴보겠습니다.

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

;div onclick=" clickBtn(event)" style="width:100px;height:100px; background:#666;">

>> ;



지금 본문에서 버튼 이벤트를 클릭하면-->div---->버튼,, ,,그런 다음 먼저 본문에 경고한 다음 div를 트리거하여 123이 팝업되도록 합니다. 버블링이 방지되므로 버튼 클릭이 트리거되지 않습니다.
그러나 우리는 이를 테스트했습니다. moz는 여전히 내부에서 외부로 실행됩니다. Alert("btn")--->>alert("123")----버블링을 방지하고 본문의 클릭 이벤트를 트리거하지 않도록 올바르게 실행하세요
이 시점에서 위의 내용이 궁금할 수 있습니다. 올바르지 않지만 addListenter 및 attachmentEvent()를 사용하여 추가된 이벤트에 대한 위 설명은 정확합니다. 예:



코드 복사


코드는 다음과 같습니다.

• 목록 항목1


• 목록 항목2