질문자 :RaYell
특정 이벤트가 발생한 후 다른 이벤트 핸들러가 실행되지 않도록 하려면 두 가지 기술 중 하나를 사용할 수 있습니다. 예제에서는 jQuery를 사용할 것이지만 이는 plain-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 를 사용해야 하는 몇 가지 이유가 있습니까? 더 나은 방법은 무엇입니까?
jQuery 이벤트 핸들러 내에서 return false 를 반환하는 것은 전달된 jQuery.Event 객체 e.preventDefault 및 e.stopPropagation 을 모두 호출하는 것과 사실상 동일합니다.
e.preventDefault() 는 기본 이벤트가 발생하는 것을 방지하고 e.stopPropagation() 은 이벤트가 버블링되는 것을 방지하고 return false 를 반환하면 둘 다 수행됩니다. 이 동작은 return false 가 이벤트 버블링을 중지 하지 않는 일반 (비 jQuery) 이벤트 핸들러와 다릅니다.
출처: 존 레식
href 클릭을 취소하기 위해 "return false"보다 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. });
이것은 당신이 제목을 붙인 것처럼 "자바스크립트" 질문이 아닙니다. jQuery의 디자인에 관한 질문입니다.
jQuery와 John Resig 의 이전에 링크된 인용 ( karim79의 메시지 )은 일반적으로 이벤트 처리기가 어떻게 작동하는지에 대한 소스 오해인 것 같습니다.
사실: false를 반환하는 이벤트 처리기는 해당 이벤트에 대한 기본 작업을 방지합니다. 이벤트 전파를 중지하지 않습니다. 이벤트 핸들러는 Netscape Navigator의 옛날부터 항상 이런 식으로 작동했습니다.
MDN 의 문서는 이벤트 핸들러에서 return false 가 작동하는 방식을 설명합니다.
jQuery에서 일어나는 일은 이벤트 핸들러에서 일어나는 일과 같지 않습니다. DOM 이벤트 리스너와 MSIE "연결된" 이벤트는 완전히 다른 문제입니다.
자세한 내용 은 MSDN의 attachEvent 및 W3C DOM 2 이벤트 문서를 참조하십시오.
jQuery를 사용할 때 return false 는 호출할 때 3가지 개별 작업을 수행합니다.
-
event.preventDefault(); -
event.stopPropagation(); - 콜백 실행을 중지하고 호출되면 즉시 반환합니다.
자세한 내용과 예제는 jQuery 이벤트: Return False 사용 중지(Mis)를 참조하세요.
하나의 요소 onClick 이벤트에서 많은 기능을 중단할 수 있습니다. false 것이 마지막으로 발사될 것이라고 어떻게 확신할 수 있습니까? preventDefault 는 요소의 기본 동작만 방지합니다.
제 생각에는
event.preventDefault()
이벤트를 취소하는 w3c 지정 방법입니다.
이벤트 취소 에 대한 W3C 사양에서 이를 읽을 수 있습니다.
또한 모든 상황에서 return false를 사용할 수 없습니다. href 속성에서 javascript 함수를 제공하고 false를 반환하면 사용자는 false 문자열이 작성된 페이지로 리디렉션됩니다.
이를 수행하는 가장 좋은 방법은 event.preventDefault() 를 사용하는 것입니다. 핸들러에서 일부 예외가 발생하면 return false 문을 건너뛰고 동작이 원하는 것과 반대가 되기 때문입니다.
그러나 코드에서 예외가 발생하지 않는다고 확신하는 경우 원하는 방법을 사용할 수 있습니다.
여전히 return false 를 사용하려면 전체 핸들러 코드를 아래와 같이 try catch 블록에 넣을 수 있습니다.
$('a').click(function (e) { try{ your code here......... } catch(e){} return false; });
항상 사용하는 것이 더 낫다는 내 경험에 따른 내 의견
event.preventDefault()
실제로 제출 이벤트를 중지하거나 방지하기 위해 return false event.preventDefault() 가 제대로 작동합니다.
return false 와 event.preventDefault() 의 주요 차이점은 아래의 return false 코드가 실행되지 않고 event.preventDefault() 경우 코드가 이 명령문 다음에 실행된다는 것입니다.
return false를 작성하면 뒤에서 다음 작업을 수행합니다.
* Stops callback execution and returns immediately when called. * event.stopPropagation(); * event.preventDefault();
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>
거짓을 반환합니다.
단순히 function()의 실행을 중지합니다.
" return false; "는 전체 프로세스 실행을 종료합니다.
이유:-
return 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>
기본적으로 jQuery는 HTML 요소에 주로 초점을 맞추는 프레임워크이기 때문에 기본적으로 기본적으로 기본값을 방지하지만 동시에 전파를 중지하여 버블링이 발생하기 때문에 이 방법을 사용합니다.
jQuery 에서 false를 반환하는 것은 다음과 같다고 간단히 말할 수 있습니다.
반환 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(); });
내 경험에 따르면 event.stopPropagation()은 CSS 효과 또는 애니메이션 작업에서 주로 사용됩니다. 예를 들어 카드와 버튼 요소 모두에 호버 효과가 있는 경우 이 경우 카드와 버튼 모두 호버 효과가 버튼 위에 있을 때 트리거됩니다. , event.stopPropagation() 버블링 중지 동작을 사용할 수 있으며 event.preventDefault()는 브라우저 동작의 기본 동작을 방지하기 위한 것입니다. 예를 들어 양식이 있지만 제출 작업에 대한 클릭 이벤트만 정의한 경우 사용자가 Enter 키를 눌러 양식을 제출하면 여기에서 클릭 이벤트가 아닌 키 누르기 이벤트에 의해 브라우저가 트리거되어 부적절한 것을 방지하기 위해 event.preventDefault()를 사용해야 합니다. 행동. 나는 return false가 도대체 무엇인지 모른다. 죄송합니다. 자세한 내용은 이 링크를 방문하여 #33 라인 https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv
기본값 방지
이벤트 흐름의 모든 단계에서 preventDefault()를 호출하면 이벤트가 취소됩니다. 즉, 이벤트의 결과로 구현에서 일반적으로 취하는 기본 작업이 발생하지 않습니다. 이벤트를 사용할 수 있습니다.
거짓을 반환
콜백 내에서 false를 반환하면 기본 동작이 방지됩니다. 예를 들어 제출 이벤트에서는 양식을 제출하지 않습니다. false를 반환하면 버블링도 중지되므로 요소의 부모는 이벤트가 발생했는지 알 수 없습니다. return false는 event.preventDefault() + event.stopPropagation()과 동일합니다.
출처 : http:www.stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false