답변:
stopPropagation어떤 막을 친 실행되는 핸들러 stopImmediatePropagation어떤 상위 핸들러를 방지 할 수 있으며 임의의 다른 실행에서 핸들러
jquery 문서의 빠른 예 :
$("p").click(function(event) {
event.stopImmediatePropagation();
});
$("p").click(function(event) {
// This function won't be executed
$(this).css("background-color", "#f00");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>example</p>이벤트 바인딩 순서는 여기서 중요합니다!
이러한 전파 중단이 어떻게 작동하는지 보여주는 작은 예입니다.
바운드 된 세 개의 이벤트 핸들러가 있습니다. 전파를 중단하지 않으면 자식 div에 3 개, 부모 div에 4 개의 경고가 있어야합니다.
이벤트 전파를 중단하면 3 개의 알림이 있습니다 (모두 내부 하위 div에 있음). 이벤트가 DOM 계층 구조를 전파하지 않기 때문에 부모 div가이를 보지 못하고 핸들러가 실행되지 않습니다.
전파를 즉시 중단하면 하나의 경고 만 표시됩니다. 내부 하위 div에 3 개의 이벤트 처리기가 연결되어 있지만 동일한 요소 내에서도 1 개만 실행되고 추가 전파가 즉시 종료됩니다.
stopPropagation()변종 모두 DOM 계층 구조 전파를 중지합니다. 뿐만 아니라. 제발 내 대답을 확인 캡처 단계에 대한 자세한 내용은.
로부터 의 jQuery API :
요소에 대한 추가 처리기가 실행되지 않도록하는 것 외에도이 메서드는 event.stopPropagation ()을 암시 적으로 호출하여 버블 링을 중지합니다. 이벤트가 상위 요소로 버블 링되지 않도록하고 다른 이벤트 핸들러가 동일한 요소에서 실행되도록하기 위해 대신 event.stopPropagation ()을 사용할 수 있습니다.
event.isImmediatePropagationStopped ()를 사용하여이 메소드가 해당 이벤트 오브젝트에서 호출되었는지 여부를 알 수 있습니다.
한마디로 : event.stopPropagation()반면, 같은 요소에 다른 핸들러가 실행 할 수 있습니다 event.stopImmediatePropagation()방지 마다 실행 한 이벤트입니다.
event.stopImmediatePropagation버블 링을 멈추지 않습니다.
stopImmediatePropagation둘 다 버블 링 방지한다 기간을 전파되는 이벤트를 중지, 당신은 또한에 모드를 변경할 수 있습니다 그것의 가치가 아무것도 캡처 가장 바깥 쪽 요소를 먼저 트리거되는 및 그런 다음에 만 아이들에게 내려 갑니다 (버블 링이 기본값이며 반대 방향으로 작동합니다)
event.stopPropagation부모 요소의 핸들러가 실행되지 못하게합니다.
호출 event.stopImmediatePropagation하면 동일한 요소의 다른 핸들러가 실행되지 않습니다.
나는 늦게 왔지만 구체적인 예를 들어 이것을 말할 수 있습니다.
<table>, with <tr>및을 가지고 있다고 가정 해 봅시다 <td>. 지금하자 당신이를 위해 3 이벤트 핸들러를 설정 말을 <td>당신이 할 경우 다음 요소 event.stopPropagation()당신이 설정 한 첫 번째 이벤트 처리기에서 <td>, 다음의 모든 이벤트 핸들러가 <td>계속 실행 하지만, 이벤트는 전파되지 않습니다 <tr>또는 <table>(그리고하지 않습니다 가서까지 <body>, <html>, document, 및 window).
당신이 사용하는 경우 그러나 지금, event.stopImmediatePropagation()첫 번째 이벤트 처리기에서, 다음 의 다른 두 이벤트 핸들러 <td>의지하지 실행 , 그리고까지 전파되지 않습니다 <tr>, <table>(최대 이동하지 않으며까지 <body>, <html>, document, 및 window).
단지를위한 것이 아닙니다 <td>. 다른 요소의 경우 동일한 원칙을 따릅니다.
1) event.stopPropagation():
=> 해당 상위 처리기의 실행 만 중지하는 데 사용됩니다.
2) event.stopImmediatePropagation():
=> 해당 상위 처리기의 실행을 중지하고 현재 처리기를 제외하고 자체에 연결된 처리기 또는 함수를 중지하는 데 사용됩니다. => 또한 전체 DOM의 현재 요소에 연결된 모든 핸들러를 중지합니다.
예를 들면 다음과 같습니다. Jsfiddle !
감사합니다 -Sahil
event.stopPropagation ()을 사용하면 동일한 요소의 다른 핸들러를 실행할 수 있으며 event.stopImmediatePropagation ()은 모든 이벤트가 실행되지 않도록합니다. 예를 들어 아래 jQuery 코드 블록을 참조하십시오.
$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed
$(this).css("color", "#fff7e3");
});이전 예제에서 event.stopPropagation 을 사용한 경우 css를 변경하는 p 요소의 다음 click 이벤트가 실행되지만 event.stopImmediatePropagation () 의 경우 다음 p click 이벤트가 실행되지 않습니다.
놀랍게도 다른 모든 대답은 진실의 절반 만 말하거나 실제로 잘못되었습니다!
e.stopImmediatePropagation() 이 이벤트에 대한 추가 핸들러가 호출되지 않도록합니다. 예외는 없습니다.e.stopPropagation()비슷하지만 아직 호출 되지 않은 경우이 요소 의이 단계 에 대한 모든 핸들러를 계속 호출합니다.어떤 단계?
예를 들어 클릭 이벤트는 항상 먼저 DOM ( "캡처 단계")까지 내려 가서 이벤트의 원점 ( "대상 단계")에 도달 한 다음 다시 버블 링합니다 ( "버블 단계"). 또한 addEventListener()캡처 및 버블 단계에 대해 독립적으로 여러 핸들러를 등록 할 수 있습니다. (대상 단계는 구별하지 않고 대상에서 두 유형의 핸들러를 호출합니다.)
그리고 이것은 다른 답변이 틀린 것입니다.
여기에 stopPropagation vs stopImmediatePropagation에 대한 JSfiddle 예제를 추가하고 있습니다. JS 피들
let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");
stopProp.addEventListener("click", function(event){
event.stopPropagation();
console.log('stopPropagation..')
})
stopProp.addEventListener("click", function(event){
console.log('AnotherClick')
})
stopImmediate.addEventListener("click", function(event){
event.stopImmediatePropagation();
console.log('stopimmediate')
})
stopImmediate.addEventListener("click", function(event){
console.log('ImmediateStop Another event wont work')
})
defaultbtn.addEventListener("click", function(event){
alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
console.log("Second event defined will also work same time...")
})div{
margin: 10px;
}<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div id="grand-div">
<div class="new" id="parent-div">
<button id="stopImmediatebtn">
StopImmediate
</button>
</div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>