preventDefault(),preventDefault()와 return false 의 차이

부모 가 있 기 때문에 하위 노드 가 함께 있 습 니 다.감청 이벤트 와 브 라 우 저의 기본 동작 이 있 기 때 문 입 니 다.자 바스 크 립 트 를 사용 할 때 예상 효 과 를 얻 기 위해 서 는 이벤트 와 동작 수행 을 막 아야 합 니 다.일반적으로 우 리 는 세 가지 방법 을 사용 합 니 다.각각stopPropagation(), preventDefault() return false.그들 사이 에는 어떤 차이 가 있 습 니까?언제 사용 해 야 합 니까?본문 에서 설명 할 것 이다.
용어
감청 이벤트:노드 에서 감청 할 수 있 는 페이지 작업.예 를 들 어 select 노드 의 change 이벤트,a 노드 의 click 이벤트.브 라 우 저의 기본 동작:특정 페이지 요소 에 있 는 기능 을 말 합 니 다.예 를 들 어 a 링크 노드 의 점프 동작 을 클릭 하고 폼 제출 동작 을 말 합 니 다.
2.stopPropagation()
이 벤트 는 각 단계 의 노드 에서 전 달 될 수 있 기 때문에 거품 이 발생 하 든 포획 하 든 특정한 노드 가 실 행 된 후에 전달 되 지 않 기 를 바 랍 니 다.이벤트 대상 의 stopPropagation()방법 을 사용 할 수 있 습 니 다.만약 에 페이지 에 부동 팝 업 층 이 존재 한다 고 가정 하면 맨 앞 에 나타 납 니 다.팝 업 층 이외 의 페이지 구역 을 클릭 할 때팝 업 레이 어 를 숨 깁 니 다.이러한 효 과 를 위해 documentElement 의 click 이 벤트 를 감청 합 니 다.이벤트 가 발생 하면 팝 업 레이 어 를 숨 깁 니 다.하지만...문제 가 있 습 니 다.사용자 가 팝 업 레이 어 를 눌 렀 을 때 숨겨 지 기 를 원 하지 않 습 니 다.하지만 이벤트 의 거품 전달 으로 documentElement 의 click 이벤트 가 실 행 됩 니 다.이때,팝 업 층 의 click 사건 을 감청 하고 stopPropagation()방법 으로 거품 을 막 을 수 있 습 니 다.아래 코드 를 참고 하 십시오.

//           ,          ,      
document.getElementById('dialog').onclick = function(ev) {
    ev.stopPropagation();
};
//   documentElement            ,      
document.documentElement.onclick = function(ev) {
    document.getElementById('dialog').style.display = 'none';
};

stopPropagation()은 상당히 좋 지만 IE8 및 이전 버 전 은 지원 되 지 않 습 니 다.IE 의 이벤트 대상 은 특유 의 속성 cancelBubble 을 포함 하고 있 습 니 다.false 로 값 을 부여 하면 이벤트 가 계속 되 는 것 을 막 을 수 있 습 니 다.예 를 들 어:

//           ,          ,      
document.getElementById('dialog').onclick = function(ev) {
ev.cancelBubble = false;
};

3.preventDefault()
이벤트 감청 이 있 는 링크 코드 는 다음 과 같 습 니 다.

<a href="http://w3c.org" onclick="alert('JavaScript Click Event');">    a>

이 링크 를 클릭 하면 대화 상 자 를 표시 한 후 페이지 를 이동 합 니 다.감청 이 벤트 를 실행 하 는 것 외 에 브 라 우 저의 기본 동작 을 실행 할 수 있 음 을 알 수 있 습 니 다.감청 이 벤트 를 실행 하기 전에 브 라 우 저의 기본 동작 이 뒤에 있 습 니 다.새 창 에 링크 를 클릭 하여 페이지 를 열 고 싶 지만 현재 페이지 가 이동 하 는 것 을 원 하지 않 습 니 다.이 때 preventDefault()를 사용 하여 다음 에 실 행 될 브 라 우 저의 묵인 동작 을 막 을 수 있 습 니 다.

<a id="link" href="http://w3c.org">W3C     a>
<script>
//     ,     
document.getElementById('link').onclick = function(ev) {
//           (    )
ev.preventDefault();
//         
window.open(this.href);
};
script>

4.return false
실행 을 종료 합 니 다.return false 이후 의 모든 트리거 이벤트 와 동작 은 실행 되 지 않 습 니 다.가끔 return false 는 stopPropagation()과 preventDefault()를 대체 할 수 있 습 니 다.예 를 들 어 우리 위의 새 창 이 링크 를 여 는 예 입 니 다.예 를 들 어:

<a id="link" href="http://w3c.org">W3C     a>
<script>
//     ,     
document.getElementById('link').onclick = function(ev) {
//         
window.open(this.href);
//      (                       )
return false;
};
script>

return false=stopPropagation()+preventDefault()가 틀 렸 다 고 생각 하 는 사람 이 있 습 니 다.return false 는 사건 을 막 을 뿐만 아니 라 대상 으로 돌아 가 순환 을 뛰 어 넘 는 등 편리 하 게 일률적으로 자 르 지 못 하고 남용 하면 실수 하기 쉽 습 니 다.