이벤트 정보cancelBubble 및 이벤트stopPropagation()의 차이점 설명

우선 나는 인터넷에서 많은 문장을 보았는데 대체적으로 두 가지(부정확한) 관점으로 나뉜다.
1. cancelBubble은 i의 거품 방지 이벤트에 사용됩니다.stopPropagation () 은 Firefox와 크롬 등 다른 브라우저에 사용됩니다.
위의 옳고 그름을 먼저 말하지 않다
먼저 하나의 예를 보십시오: (테스트 환경:chrom5.0.275.7,moz3.6.4,opera10.53,ie6,7,8)

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>function clickBtn(event) 
  <br>{ 
  <br>event=event?event:window.event; 
  <br>event.cancelBubble=true; 
  <br>alert(event.cancelBubble); 
  <br>} 
  <br> 
  
 
  
 
  
 
 

테스트 결과:
a,chrom5.0.275.7, opera10.53,ie6,7,8 이 몇 개의 브라우저에서 cancel Bubble는 유효하고 이벤트의 거품을 막아서 바디의 onclick을 터치할 수 없습니다.button의 클릭만 트리거
alert(event.cancelBubble);출력 결과true
b,moz3.6.4버전에서는 바디의 원클릭을 막을 수 없지만alert(event.cancelBubble);출력 결과는 여전히true입니다. 이벤트일 것 같습니다.cancelBubble은 이벤트에 속성을 추가하고true로 값을 부여합니다.
js 코드를 이렇게 바꾸면:

 
  
 
  <br>function clickBtn(event) 
  <br>{ 
  <br>event=event?event:window.event; 
  <br>event.stopPropagation(); 
  <br>alert("123"); 
  <br>} 
  <br> 
  
 
 

효과적으로 막을 수 있다.물론 크롬,opera의 이벤트.stopPropagation();효과가 있지만,
결론1: 이상 설명 이벤트.cancel Bubble은 새 버전 크롬,opera 브라우저에서 이미 지원하고 있습니다.cancelBubble 비교 이벤트.stopPropagation () 이 더 좋아요. 영어뿐만 아니라.그래서 모즈 재발급 버전도 지원해 주셨으면 좋겠습니다.이렇게 하면 호환이 돼요.
2. 그리고 자주 보는 사건 순서에 대한 질문:
불완전하고 정확한 결론(자인)
ie: 원본 이벤트 요소->> 부모 요소 이벤트->>body-->document
moz: 다른 브라우저와 상반되는 경우
먼저 하나의 예를 보십시오.

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  <br>function clickBtn(event) 
  <br>{ 
  <br>event=event?event:window.event; 
  <br>event.stopPropagation(); 
  <br>alert("123"); 
  <br>} 
  <br> 
  
 
  
 
  
 
 

만약에 위의 관점에 따라 제가 지금 button 이벤트를 클릭하면body---->div----->button,,,,,,,,,,,,,,,그러면 먼저alertbody를 누르고div를 터치하면 123이 뜨는데 거품을 막기 때문에 button의 클릭은 터치하지 않습니다.
하지만 우리의 테스트를 통해moz는 여전히 내향외에서 촉발한다.올바른 실행alert("btn")--->>alert("123")----거품이 바디의 클릭 이벤트를 촉발하지 않도록 막기
여기까지는 위쪽이 정확하지 않은지 의심할 수 있지만, 위의 설명은add Listenter와attach Event로 추가된 이벤트에 대해 정확합니다 ().예:

 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
List Item1
 
  
List Item2
 
  
 
  
 
  <br>function init(){ 
  <br>if(!!document.all){ 
  <br>document.getElementById('li1').attachEvent('onclick', function(event){ 
  <br>alert('li1'); 
  <br>}) 
  <br>document.getElementById('li2').attachEvent('onclick', function(event){ 
  <br>alert('li2'); 
  <br>}) 
  <br>document.getElementById('ul').attachEvent('onclick', function(event){ 
  <br>alert('ul'); 
  <br>//event.cancelBubble = true; 
  <br>alert(event.stopPropagation); 
  <br>}); 
  <br>}else{ 
  <br>document.getElementById('li1').addEventListener('click', function(event){ 
  <br>alert('li1'); 
  <br>}, true) 
  <br>document.getElementById('li2').addEventListener('click', function(event){ 
  <br>alert('li2'); 
  <br>}, true) 
  <br>document.getElementById('ul').addEventListener('click', function(event){ 
  <br>event=event?event:window.event; 
  <br>event.stopPropagation(); 
  <br>alert('ul'); 
  <br>}, true); 
  <br>} 
  <br>} 
  <br>init(); 
  <br> 
  
 
  
 
  
 
 

이런 방법으로는 부합된다.실행 결과는 l의 클릭 이벤트를 터치한 다음 거품이 생기는 것을 막았기 때문에 li를 눌렀을 때 그 자체의 클릭 이벤트는 터치하지 않습니다.(참고로 이런 동적으로 이벤트를 추가하는 방법은 이벤트.cancel Bubble도 모즈에서 효과가 있는 것 같지만 크롬과 모즈에서는 차이가 있다)