[javascript] stopPropagation vs. stopImmediatePropagation

차이 무엇 event.stopPropagation()과 event.stopImmediatePropagation()?

답변

stopPropagation어떤 막을 친 실행되는 핸들러 stopImmediatePropagation어떤 상위 핸들러를 방지 할 수 있으며 임의의 다른 실행에서 핸들러

$("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>

스 니펫 확장

이벤트 바인딩 순서는 여기서 중요합니다!

코드 스 니펫 표시

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

스 니펫 확장

답변

이러한 전파 중단이 어떻게 작동하는지 보여주는 작은 예입니다.

코드 스 니펫 표시

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});

div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

스 니펫 확장

바운드 된 세 개의 이벤트 핸들러가 있습니다. 전파를 중단하지 않으면 자식 div에 3 개, 부모 div에 4 개의 경고가 있어야합니다.

이벤트 전파를 중단하면 3 개의 알림이 있습니다 (모두 내부 하위 div에 있음). 이벤트가 DOM 계층 구조를 전파하지 않기 때문에 부모 div가이를 보지 못하고 핸들러가 실행되지 않습니다.

전파를 즉시 중단하면 하나의 경고 만 표시됩니다. 내부 하위 div에 3 개의 이벤트 처리기가 연결되어 있지만 동일한 요소 내에서도 1 개만 실행되고 추가 전파가 즉시 종료됩니다.

답변

로부터 의 jQuery API :

요소에 대한 추가 처리기가 실행되지 않도록하는 것 외에도이 메서드는 event.stopPropagation ()을 암시 적으로 호출하여 버블 링을 중지합니다. 이벤트가 상위 요소로 버블 링되지 않도록하고 다른 이벤트 핸들러가 동일한 요소에서 실행되도록하기 위해 대신 event.stopPropagation ()을 사용할 수 있습니다.

event.isImmediatePropagationStopped ()를 사용하여이 메소드가 해당 이벤트 오브젝트에서 호출되었는지 여부를 알 수 있습니다.

한마디로 : event.stopPropagation()반면, 같은 요소에 다른 핸들러가 실행 할 수 있습니다 event.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 이벤트가 실행되지 않습니다.