상위 요소의 이벤트 핸들러가 하위 요소 이벤트 중 하나에 대한 전파를 중지 할 수 있습니까?

Question

아래의 시나리오가 실패하는 이유를 다른 사람이 이해할 수 있기를 바랍니다. 나는 그 안에 중첩 된 다른 ul 태그의 주어진 하위 li 요소를 조건으로하는 이벤트 핸들러가있는 부모 ul 태그를가집니다. 마크 업입니다

<ul id="outerUL"> 
    <li>LIST ITEM 1</li> 
    <li>LIST ITEM 2</li> 
    <li> 
     <ul id="innerUL"> 
      <li>LIST ITEM 3</li> 
      <li>LIST ITEM 4</li> 
      <li> 
       <ul id="inMostUL"> 
        <li>LIST ITEM 5</li> 
        <li>LIST ITEM 6</li><!-- we condition for this element --> 
        <li>LIST ITEM 7</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

자바 스크립트입니다 : 내가 신중에 넣어하기로 결정한 경우 지금

var outerMostUL = document.getElementById("outerUL"); 
outerMostUL.addEventListener('click', 
    function(e){ 

     if(e.target.innerHTML === "LIST ITEM 6"){ 
      e.stopPropagation(); 
      alert("you clicked LIST ITEM 6. Event travel stops."); 
      // return; // a return WILL work 
     } 

    // below runs if propagation continues... 
    alert("outerMostUL event handler fired!"); 

    }, 
    false); 

을 (그것은 ... 상위 호출에서 조건부 .stopPropagation()가 실패 할 것 같다). 그 리 태그에 또는 addEventListener() 호출, .stopPropagation()가 작동 예상대로, 예를 들면 :

// A discreet event handler does work 
var inMostUL = document.getElementById("inMostUL"); 
inMostUL.children[1].addEventListener('click', function(e){ 

    e.stopPropagation(); 
    alert("The descendent event fires, but stops now."); 

}); 

그래서 내 질문은 : 당신이 주어진 e.target에 대한 조상의 핸들러에서 조건을 사용할 수 있어야하고 그 전날의 번식을 멈추다 버블 링이 활성화되어 있다면? 엘리먼트는 이벤트를 발생시키기 위해 바인딩 된 자체 처리기를 가지고 있어야하지만 아마도 그 메소드를 통해 실제로 이벤트 리스너를 추가하는 조상 체인을 이동하는 전파 이벤트를 혼동하는 것 같습니다. 모든 가벼운 흘리기는 크게 감사하겠습니다. 나는 단순한 예제를 통해 js 이벤트 핸들링을 개념화하려고하고있다. 이 점을 고려해 주셔서 감사합니다.

Answer 1

이벤트 버블 링 전파는 조상 체인을 따라 어느 지점에서나 e.stopPropagation()으로 중지 될 수 있으며 이벤트가 다른 조상까지 더 이상 전파되지 않습니다.

그리고 특정 상황에서만 조건부 전파를 중지해도 아무런 문제가 없습니다.

---

당신의 혼란 중 일부는 전파가 아니라 자바 스크립트 기능과 관련이 있다고 생각합니다.

var outerMostUL = document.getElementById("outerUL"); 
outerMostUL.addEventListener('click', function(e){ 
    if(e.target.innerHTML === "LIST ITEM 6"){ 
     e.stopPropagation(); 
     alert("you clicked LIST ITEM 6. Event travel stops."); 
    } 
    // below runs ALWAYS, regardless of the result of the previous "if" statement 
    alert("outerMostUL event handler fired!"); 
}, false); 

두 번째 경고를하지 때문에 전파의 return 문없이 발생하지만 자바 스크립트 함수가 조건 if 블록 후 실행 계속해서이 코드에서. 전파와는 아무런 관련이 없지만 자바 스크립트 프로그램 흐름 만 있습니다. return 문을 추가하면 이벤트 처리기 콜백을 일찍 종료하므로 나머지는 실행되지 않습니다. return 문이 없으면 if 문이 만족되는지 여부를 if 블록 이후에 해당 함수에서 계속 실행합니다.

---

이벤트 전파를 개념적으로 이해하려면 브라우저에서 거품이 나는 이벤트를 시작하는 코드 조각을 생각하면됩니다. 이 이벤트는 먼저 대상 객체의 이벤트 핸들러로 전송되고 전달이 취소되지 않으면 다음 조상으로 전송되고 전달이 취소되지 않으면 조상 체인까지 전송됩니다 document 오브젝트에 도달하거나 전파가 취소 될 때까지

---

또한 명심 당신은 jQuery를 같은 크로스 플랫폼 라이브러리를 사용하지 않는 당신은 전파의 정지가 IE의 그 이전 버전에서 다르게 작동 IE의 이전 버전을 지원합니다.