programing

jquery : event.stopImmediatePropagation () 대 반환 false

nasanasas 2020. 12. 14. 08:24
반응형

jquery : event.stopImmediatePropagation () 대 반환 false


이벤트 핸들러 호출 event.stopImmediatePropagation()return false내부에 차이가 있습니까?


예 그들은 다릅니다.

return false기본적으로 모두를 호출하는 것과 동일 event.stopPropagation()하고 event.preventDefault().

반면 동일한 요소에 등록 된 다른 이벤트 핸들러가 실행되는 것을 방지 event.stopImmediatePropagation()하는 event.stopPropagation() 플러스와 동일합니다. 따라서 클릭 한 링크를 따라가는 것과 같은 이벤트에 대한 기본 동작을 차단하지 않습니다.

요컨대 :

                            stop   |    prevent     | prevent "same element"
                          bubbling | default action | event handlers

return false                 Yes           Yes             No
preventDefault               No            Yes             No
stopPropagation              Yes           No              No
stopImmediatePropagation     Yes           No              Yes

return false "일반"JavaScript 이벤트 처리기에서도 작동합니다.

event.stopPropagation()그리고 event.preventDefault()또한 (W3C의 호환 브라우저에서) "정상"자바 스크립트 이벤트 핸들러에서 작업 반면, event.stopImmediatePropagation()jQuery를에서 확장 ( 업데이트 : 분명히 그것은의 일부입니다 DOM 레벨 3 이벤트 사양 ).

참고 : 이벤트가 "일반" (jQuery가 아닌) 이벤트 처리기 에서 버블 링되는 것을 방지 return false 하지 않습니다 ( 이 답변 참조 ) (그러나 여전히 기본 동작을 방지합니다).


읽을만한 가치가 있습니다.


반환 false하면 이벤트 버블 링이 중지되지만 다른 바인딩 된 이벤트가 발생합니다. 그러나 stopImmediatePropagation다른 바운드 이벤트가 발생하는 것을 방지하고 버블 링을 중지합니다.

jsfiddle 에 대한 코드 예제 .


여기에 대한 전체 데모는 return false, preventDefault, stopPropagationstopImmediatePropagation:

var kid = document.getElementsByTagName('button')[0];
var dad = document.getElementsByTagName('div')[0];

kid.addEventListener('click', function(e) {
    console.log('kid here');
    e.stopImmediatePropagation();
});

kid.addEventListener('click', function(e) {
    console.log('neighbour kid here');
});

dad.addEventListener('click', function(e) {
   console.log('dad here');
});

dad.addEventListener('click', function(e) {
   console.log('neighbour dad here');
});
<div>
    <button>press</button>
</div>

( JSFiddle 에서도 사용 가능합니다 .)

manwal의 답변 표는 완전히 정확하지 않습니다.

                            stop   |    prevent     |       prevent
                          bubbling | default action |    event handlers
                                   |                |  Same Element  |  Parent Element

return false                 Yes           Yes               No           No
preventDefault               No            Yes               No           No
stopPropagation              Yes           No                No           Yes
stopImmediatePropagation     Yes           No                Yes          **Yes**

Yes. event.stopImmediatePropagation() won't let any other handlers for that event be called, regardless of where they are bound. Return false only stops handlers bound to other elements (ie not the same element as the event handler dealing with the stopImmediatePropagation() call) from receiving the event.


@FelixKling answer's table having great concept:

I am posting more explained table:

                            stop   |    prevent     |       prevent          |
                          bubbling | default action |    event handlers      |
                                                     Same Element  |  Parent Element

return false                 Yes           Yes             No           No
preventDefault               No            Yes             No           No
stopPropagation              Yes           No              No           Yes
stopImmediatePropagation     Yes           No              Yes          No

Reference: https://stackoverflow.com/a/5302939/2236219

참고URL : https://stackoverflow.com/questions/5302903/jquery-event-stopimmediatepropagation-vs-return-false

반응형