event.preventDefault () vs. false 반환

2959

특정 이벤트가 발생한 후 다른 이벤트 처리기가 실행되지 않도록하려면 두 가지 기술 중 하나를 사용할 수 있습니다. 예제에서는 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대신 사용해야하는 몇 가지 이유가 있습니까? 더 좋은 방법은 무엇입니까?

— 라엘
소스

172

jQuery preventDefault는 다른 처리자가 실행되는 것을 막지 않습니다 . 그게 다야 stopImmediatePropagation.

— Crescent Fresh

19

@CrescentFresh, 이벤트가 시작되는 DOM 노드에서 다른 (다음에 바인딩 된) 핸들러가 실행되지 못하게합니다. 전파를 막지는 못합니다.

— eyelidlessness

37

이것들은 "이벤트 전파를 멈추는 두 가지 방법"이 아닙니다. e.preventDefault (); 기본 조치를 방지하고 e.stopPropagation ()에 의해 수행되는 이벤트 전파를 중지하지 않습니다.

— Timo Tijhof

24

이 질문과 답변은 jQuery에 관한 것입니다. 일반 자바 스크립트 답변을 찾으려면 여기에 event.preventDefault () vs. false 반환 (jQuery 없음)

— Oriol

5

이 답변은 모든 stackoverflow.com/a/5302939/759452

— Adrien

2817

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 ()를 사용하면 어떤 이점이 있습니까?

— 카림 79
소스

126

return falseDOM2 처리기 ( addEventListener)에서 전혀 아무것도하지 않습니다 (기본 설정을 막거나 버블 링을 중지하지 않음; Microsoft DOM2-ish 처리기 ( attachEvent)에서 기본을 막지 만 버블 링을 방지합니다. DOM0 처리기 ( onclick="return ...")에서 기본값을 제공하지 않음 (제공됨) 당신은 포함 return속성에서)하지만 버블 링하지, 즉 JQuery와의 일이 있기 때문에 jQuery를 이벤트 핸들러에서, 그것은 모두를한다. 여기에 세부 사항 및 라이브 테스트

— TJ 크라우

12

여기에서 "Propagation"과 "Default"를 정의하면 도움이됩니다. 나는 그들을 계속 혼란스럽게한다. 이 올바른지? 전파 = 내 코드 (부모 요소에 대한 JavaScript 이벤트 핸들러) 기본값 = 브라우저 코드 (링크, 텍스트 선택 등)

— Bob Stein

5

버블 링이란 무엇입니까? 예?

— Govinda Sakhare

5

jQuery 이외의 이벤트 핸들러에서 이벤트 전파를 중지 return false하지 않는다는 점에 +1 즉 <a href="#" onclick="return false">Test</a>않습니다 하지 품어에서 이벤트를 중지합니다.

— Doug S

424

내 경험상 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.
});

— 제프 폴턴
소스

68

사실이지만, 점진적인 향상을 수행 할 때 반대 행동이 선호되는 경우가 많습니다 (기본 조치를 재정의하는 가장 가능성이 높은 것으로 생각됩니다)

— meandmycode

둘 다 이벤트의 기본 동작을 차단하는 방법이며, 해결하려는 문제의 문제 일뿐입니다.

— Ferkze

102

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

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

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

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

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

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

— 개렛
소스

6

@rds "preventDefault는 DOM을 통한 이벤트의 추가 전파를 중단하지 않습니다. event.stopPropagation을 사용해야합니다."

— 개럿

대답 밀접하게 관련 질문에 앞서 HTML 5, 이벤트 핸들러에서 false를 반환하는 것은되지 않았 음을 주장 스펙을 갖추고 전혀 아무것도있다. 어쩌면 (이해하기 어려운) 스펙을 잘못 해석했거나 문자 그대로 지정되지 않았음에도 불구하고 모든 브라우저 return false가와 동일하게 해석 되었습니다 event.preventDefault(). 그러나 나는 몰라; 소금 한 덩어리로 이것을 가져 가면 충분합니다.

— Mark Amery

9

나는 구글의 모든 자바 스크립트 검색 결과가 실제로 jQuery를, 일에 대해 얼마나 싫어

— 알렉산더 Derck

그는 JavaScript와 jQuery로 태그를 지정했으며 둘 다 정확합니다. jQuery자체 언어가 아닌 JavaScript의 하위 집합 일뿐입니다.

— ProfK

67

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

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

— JAAulde
소스

@VisruthCV 아카이브 버전에 대한 링크가있는 추가 노트보기

— JAAulde

57

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

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

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

— 제임스 드링크 드
소스

코드의 다른 부분이이 이벤트를 수신하는 경우 event.stopPropagation (); 콜백을 취소합니까?

— Ferkze

41

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

— 엘 다르 자파 로프
소스

20

나는 생각한다

event.preventDefault()

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

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

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

— 라훌
소스

4

내가 만난 브라우저는 없습니다. 아마도 당신은 그것을 다른 것과 혼동 <a href="javascript:return false"합니까?

— mplungjan 2019

10

-1; false를 반환하는 href가 "false"라는 단어가 적힌 텍스트 페이지를 생성한다고 주장하면 말도 안됩니다.

— Mark Amery

1

(빼기) 1; 브로큰 링크 + 완전한 넌센스

— Phil

15

event.preventDefault()핸들러에서 일부 예외가 발생하면 return false문을 건너 뛰고 동작이 원하는 것과 반대 이기 때문에 이것을 사용하는 가장 좋은 방법은 사용 하는 것입니다.

그러나 코드가 예외를 트리거하지 않을 것이라고 확신하는 경우 원하는 방법을 사용할 수 있습니다.

return을 계속 사용하려면 false다음 과 같이 전체 처리기 코드를 try catch 블록에 넣을 수 있습니다.

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

— 나가 스리 누 카푸 세티
소스

1

내 경험에 따르면 내 의견은 항상 사용하는 것이 좋습니다

event.preventDefault()

실제로 return false event.preventDefault()는 잘 작동 하지 않고 필요할 때마다 제출 이벤트를 중지하거나 방지 합니다.

— 디립
소스

11

더 나은 이유는 무엇입니까? 당신은 말 그대로 여기에 전혀 정당성을 부여하지 않았습니다. -1.

— Mark Amery

여러 이벤트 바인딩이있는 경우 e.preventDefault ()가 false를 반환하는 것보다 더 많이 타겟팅됩니다.

— Taiger

preventDefault내가 "기본값을 방지"라는 영어 단어입니다. return false나는 그것이 "거짓을 돌려 준다"는 것을 이해하는 영어 단어이지만 Google에이 암호 코드가 나올 때까지 왜 그런지 전혀 모른다. 그리고 보너스, 나는 separatly 제어 할 수 있습니다 stopPropagation와 preventDefault .

— Joan

1

주요 차이점 return false및 event.preventDefault()아래에 코드가 있다는 것입니다 return false실행되지 않습니다과의 event.preventDefault()경우 코드가이 문 다음에 실행됩니다.

return false를 쓰면 뒤에서 다음을 수행합니다.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

— 압둘라 쇼 아이브
소스

1

e.preventDefault ();

단순히 요소의 기본 동작을 중지합니다.

사례 예 :-

하이퍼 링크가 URL을 따르지 못하게하고 제출 단추가 양식을 제출하지 못하게합니다. 많은 이벤트 핸들러가 있고 기본 이벤트가 발생하지 않도록 여러 번 발생하는 것을 막으려면 function () 맨 위에 사용해야합니다.

이유:-

사용하는 이유 e.preventDefault();는 우리 코드에서 코드에 문제가 발생하여 링크 또는 양식을 실행하여 제출하거나 필요한 조치를 실행하거나 허용하기 때문입니다. & 링크 또는 제출 버튼이 제출되며 이벤트를 계속 전파 할 수 있습니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

스 니펫 확장

False를 반환;

단순히 function ()의 실행을 중지합니다.

" return false;"는 전체 프로세스 실행을 종료합니다.

이유:-

사용 이유는 false를 반환합니다. 엄격하게 모드에서 더 이상 함수를 실행하고 싶지 않다는 것입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

스 니펫 확장

— 파스 라발
소스

1

기본적으로 jQuery는 HTML 요소에 주로 중점을 둔 프레임 워크이므로 기본적으로 기본값을 방지하지만 동시에 전파를 중지시키는 방식이기 때문에 이러한 방식으로 결합합니다.

따라서 간단하게 말할 수 있습니다. false를 반환하는 jQuery것은 다음과 같습니다.

false를 반환하면 e.preventDefault이며 e.stopPropagation입니다.

그러나 jQuery 또는 DOM 관련 함수에 있다는 것을 잊지 마십시오. 요소에서 요소를 실행할 때 기본적으로 기본 동작 및 이벤트 전파를 포함하여 모든 항목이 실행되는 것을 방지합니다.

기본적으로 사용 시작하기 전에 return false;먼저 무엇을 이해 e.preventDefault();하고 e.stopPropagation();당신이 생각하는 경우에 당신은 단순히 그것을 사용, 두 가지를 동시에 필요합니까.

기본적으로 아래 코드는 다음과 같습니다.

$('div').click(function () {
  return false;
});

이다 동등한 이 코드 :

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

— 알리레자
소스

1

내 경험에서 event.stopPropagation ()은 주로 CSS 효과 또는 애니메이션 작업에 사용됩니다. 예를 들어 카드와 버튼 요소 모두에 호버 효과가있는 경우, 버튼 위에 마우스를 올리면 카드와 버튼 호버 효과가 모두 트리거됩니다. event.stopPropagation () 중지 버블 링 동작을 사용할 수 있으며 event.preventDefault ()는 브라우저 동작의 기본 동작을 방지하기위한 것입니다. 예를 들어, 양식이 있지만 제출 조치에 대한 클릭 이벤트 만 정의했습니다. 사용자가 Enter 키를 눌러 양식을 제출하면 브라우저가 키 누르기 이벤트에 의해 트리거되며 클릭 이벤트가 아닌 브라우저는 event.preventDefault ()를 사용하여 부적절한 것을 피해야합니다. 행동. 나는 도대체 거짓이 무엇인지 모른다; 더 자세한 내용을 보려면이 링크를 방문하여 33 번 라인을 사용하십시오.https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

— 사티쉬 샤자 한
소스

event.preventDefault () vs. false 반환

1. event.preventDefault()

2. return false

1. `event.preventDefault()`

2. `return false`