[javascript] event.preventDefault () vs. false 반환

JAVASCRIPT / 글쓴이

특정 이벤트가 발생한 후 다른 이벤트 처리기가 실행되지 않도록하려면 두 가지 기술 중 하나를 사용할 수 있습니다. 예제에서는 jQuery를 사용하지만 일반 JS에도 적용됩니다.

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

이벤트 전파를 중지하는 두 가지 방법 사이에 중요한 차이점이 있습니까?

나를 위해, return false;메소드를 실행하는 것보다 간단하고 짧으며 아마도 오류가 적습니다. 이 방법을 사용하면 올바른 케이스, 괄호 등을 기억해야합니다.

또한 메서드를 호출하려면 콜백에서 첫 번째 매개 변수를 정의해야합니다. 아마도 이런 식으로 피하고 preventDefault대신 사용해야하는 몇 가지 이유가 있습니까? 더 좋은 방법은 무엇입니까?

답변

return false에서 JQuery와 이벤트 핸들러 내에서 효과적으로 모두 호출과 동일 e.preventDefault및 e.stopPropagation전달에 jQuery.Event 개체.

e.preventDefault()기본 이벤트가 발생 e.stopPropagation()하지 않도록하고 이벤트 버블 링을 방지하며 return false두 가지를 모두 수행합니다. 에서이 행동 다름을 숙지 일반 (비 jQuery를) 이벤트 핸들러가있는, 특히, return false않습니다 하지 품어에서 이벤트를 중지합니다.

출처 : John Resig

href 클릭을 취소하기 위해 “false return”에 대해 event.preventDefault ()를 사용하면 어떤 이점이 있습니까?

답변

내 경험상 return false를 사용하는 것보다 event.preventDefault ()를 사용할 때 분명한 이점이 하나 있습니다. 앵커 이벤트에서 클릭 이벤트를 캡처한다고 가정하십시오. 그렇지 않으면 사용자가 현재 페이지에서 다른 위치로 이동해야하는 경우 큰 문제가됩니다. 클릭 핸들러가 return false를 사용하여 브라우저 탐색을 방지하면 인터프리터가 return 문에 도달하지 않아 브라우저가 앵커 태그의 기본 동작을 계속 실행할 가능성이 열립니다.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

event.preventDefault ()를 사용하면 이점을 핸들러의 첫 번째 줄로 추가 할 수 있으므로 함수의 마지막 줄에 도달하지 않더라도 앵커의 기본 동작이 실행되지 않습니다 (예 : 런타임 오류). ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

답변

제목은 “JavaScript”질문이 아닙니다. jQuery 디자인에 관한 질문입니다.

jQuery와 John Resig ( karim79의 메시지 ) 에서 이전에 링크 된 인용 은 일반적인 이벤트 처리기가 어떻게 작동하는지에 대한 오해의 원인으로 보입니다.

사실 : false를 리턴하는 이벤트 핸들러는 해당 이벤트에 대한 기본 조치를 방지합니다. 이벤트 전파를 중지하지 않습니다. Netscape Navigator의 옛날부터 이벤트 핸들러는 항상 이런 식으로 작동했습니다.

MDN 의 문서return false 는 이벤트 핸들러 작동 방식 을 설명합니다 .

jQuery에서 발생하는 것은 이벤트 핸들러에서 발생하는 것과 다릅니다. DOM 이벤트 리스너와 MSIE “첨부 된”이벤트는 전혀 다릅니다.

자세한 내용 은 MSDN의 attachEvent 및 W3C DOM 2 Events 설명서를 참조하십시오 .

답변

일반적으로 첫 번째 옵션 ( preventDefault())을 선택 해야하지만 어떤 상황에 있는지, 목표가 무엇인지 알아야합니다.

연료 코딩은 좋은가 에 기사 return false;대 event.preventDefault()대 event.stopPropagation()대를event.stopImmediatePropagation() .

답변

jQuery를 사용할 return false때 호출 할 때 3 가지 별도의 작업을 수행합니다.

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 콜백 실행을 중지하고 호출되면 즉시 반환합니다.

자세한 내용과 예제는 jQuery 이벤트 : Return False 사용 중지 (Mis) 를 참조하십시오.

답변

onClick하나의 요소 에 대해 많은 기능을 이벤트 에 걸 수 있습니다 . false마지막으로 발사 한 것을 어떻게 확신 할 수 있습니까? preventDefault반면에 요소의 기본 동작 만 확실히 방지 할 수 있습니다.

답변

나는 생각한다

event.preventDefault()

이벤트를 취소하는 w3c 지정 방법입니다.

이벤트 취소 에 대한 W3C 사양에서이 내용을 읽을 수 있습니다 .

또한 모든 상황에서 return false를 사용할 수는 없습니다. href 속성에 자바 스크립트 함수를 제공하고 false를 반환하면 사용자는 false 문자열이 작성된 페이지로 리디렉션됩니다.