마이페이지
>티저 텍스트...
이제 사용자가 기사 제목을 클릭하면 기사를 div.contentd에 동적으로 로드한다고 가정해 보겠습니다. :
return false_javascript 기술의 올바른 사용에 대한 간략한 분석
- WBOY원래의
- 2016-05-16 17:17:421020검색
아마도 jQuery 이벤트 처리에 대해 처음 배우기 시작했을 때 가장 먼저 본 예는 클릭 이벤트를 보여주는 다음 코드와 같이 브라우저가 기본 동작을 실행하지 못하도록 방지하는 방법에 관한 것이었습니다.
코드 복사 코드는 다음과 같습니다.
$("a.toggle").click(function () {
$( "#mydiv").toggle();
return false; // 브라우저가 `#`을 방문하지 못하도록 합니다.
})
이 함수는 토글을 사용하여 또는 #mydiv 를 숨기고 브라우저가 href에 지정된 링크에 계속 액세스하지 못하도록 합니다.
위와 같은 예는 브라우저가 기본 동작을 실행하지 못하도록 "return false"를 사용하는 나쁜 습관을 갖게 만듭니다. 이 기사에서는 브라우저가 기본 동작을 실행하지 못하도록 하는 두 가지 중요한 방법에 대해 설명하겠습니다. . 중요 주제:
•올바른 방법 선택: return false 또는 PreventDefault, stopPropagation 또는 stopImmediatePropagation
•적절한 위치 선택, 시작, 종료 또는 중간 어딘가: 이벤트 콜백의 어느 부분에서 브라우저의 기본 동작을 취소해야 합니까?
참고: 이 기사에서 이벤트 버블링을 언급할 때 제가 표현하고 싶은 것은 대부분의 이벤트가 처음에는 DOM에서 트리거된 다음 진행된다는 것입니다. DOM 트리를 통해 상위 요소의 각 수준에서 트리거됩니다. 이벤트는 형제 노드나 하위 노드에서 버블링되지 않습니다. 이벤트가 버블링되면 이를 이벤트 캡처(이벤트 캡처)라고 합니다. 이벤트에 대해 자세히 알아볼 수 있습니다. 여기에서 버블링하고 캡처합니다.
올바른 방법을 선택하세요
"return false"가 오용되는 이유는 우리가 제공한 작업이 완료된 것처럼 보이고 브라우저가 더 이상 href의 링크로 리디렉션되지 않으며 양식이 더 이상 다음으로 리디렉션되지 않기 때문입니다. href의 링크는 계속 제출되지만 이렇게 하면 무엇이 문제인가요?
'거짓 반환'이 정확히 무엇을 하나요?
"return false"를 호출할 때마다 실제로는 3가지 작업을 수행합니다.
•event.preventDefault();
•event.stopPropagation();
•콜백 함수 실행을 중지하고 즉시 반환합니다.
"잠깐만" 소리지르셨어요! 브라우저가 기본 동작 실행을 중지하기를 원할 뿐 다른 두 가지 작업을 수행하는 데는 필요하지 않습니다.
이 세 가지 중에서 브라우저가 기본 동작을 계속 수행하지 못하도록 방지하는 데만 사용됩니다. 이벤트 버블링을 중지하려는 경우가 아니면 return false를 사용하면 코드에 많은 숨겨진 위험이 발생합니다. 실제 예를 통해 이러한 오용의 결과를 살펴보겠습니다.
시연에 사용한 HTML은 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.jQuery(document).ready(function ($) { $("div.post h2 a").click(function () {
var a = $(this), href = a.attr('href'), / / jQuery가 `href `를 표준화하도록 합니다.
content = a.parent().next();
content.load(href " #content")
return false; 링크를 따라가는 행동
})
이 코드는 (적어도 지금은) 잘 작동하지만, 이 생각을 계속 따르면 사용자가 div.post 요소(또는 그 하위 요소)를 클릭할 때 메시지를 표시하려면 어떻게 해야 할까요? 활성 클래스를 추가하려면 div.post에 클릭 콜백을 추가해야 합니다.
// 내부 문서 준비:
var post = $("div.post")
post.click(function () {
/ / 모든 div.post에서 활성 항목 제거
post.removeClass("active");
// 여기에 다시 추가
$(this).addClass("active"); ) ;
이제 게시물 제목을 클릭하면 이 코드가 작동할까요? 대답은 '아니요'입니다. 왜냐하면 제목의 클릭 콜백에서 사용해야 하는 것 대신에 "return false"는 event.preventDefault();와 같으므로 이벤트 버블링은 다음과 같습니다. 종료되면 클릭 이벤트는 div.post까지 버블링되지 않으며 이에 대해 추가한 이벤트 콜백도 당연히 호출되지 않습니다.
라이브나 델리게이트 이벤트와 혼합하면 상황은 더욱 악화될 것입니다.
코드 복사
content = a.parent().next();
content.load(href " #content")
return false; 링크를 따라가는 행동
})
이 코드는 (적어도 지금은) 잘 작동하지만, 이 생각을 계속 따르면 사용자가 div.post 요소(또는 그 하위 요소)를 클릭할 때 메시지를 표시하려면 어떻게 해야 할까요? 활성 클래스를 추가하려면 div.post에 클릭 콜백을 추가해야 합니다.
코드 복사 코드는 다음과 같습니다:
// 내부 문서 준비:
var post = $("div.post")
post.click(function () {
/ / 모든 div.post에서 활성 항목 제거
post.removeClass("active");
// 여기에 다시 추가
$(this).addClass("active"); ) ;
라이브나 델리게이트 이벤트와 혼합하면 상황은 더욱 악화될 것입니다.
코드 복사 코드는 다음과 같습니다.
$("a").click( function () {
// 작업 수행
return false
})
$("a").live("click", function () {
/ / 실행되지 않습니다
})
그럼 우리에게 정말 필요한 것은 무엇일까요? // 작업 수행
return false
})
$("a").live("click", function () {
/ / 실행되지 않습니다
})
preventDefault()
대부분 return false를 사용할 때 실제로 필요한 것은 e.preventDefault()입니다. e.preventDefault를 사용하려면 이벤트 인수를 콜백 함수(이 경우 e)에 전달해야 합니다.코드 복사 코드는 다음과 같습니다.
$("a").click(function (e) {
// e == 이벤트 데이터
e. PreventDefault();
});
모든 작업을 수행하지만 상위 노드가 이벤트를 계속 처리하는 것을 방해하지는 않습니다. 코드가 많을수록 코드가 더 유연해지고 유지 관리가 더 쉬워집니다. // e == 이벤트 데이터
e. PreventDefault();
});
stopPropagation()
그러나 이벤트 버블링을 중지해야 하는 상황이 있을 수 있습니다. 다음 예를 살펴보겠습니다.코드 복사 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.$("div.post"). click(function () { // 첫 번째 작업을 수행합니다. })
$("div.post a").click(function (e) {
// 브라우저의 기본 동작을 취소하지 마세요
// 이 이벤트를 버블링하지 마세요!
e.stopPropagation()
})
false를 반환하면 div의 클릭 이벤트가 실행되지 않지만 사용자는 클릭한 링크에 도달하지 않습니다.
stopImmediatePropagation()// 브라우저의 기본 동작을 취소하지 마세요
// 이 이벤트를 버블링하지 마세요!
e.stopPropagation()
})
false를 반환하면 div의 클릭 이벤트가 실행되지 않지만 사용자는 클릭한 링크에 도달하지 않습니다.
이 메서드는 이벤트가 계속 실행되는 것을 중지합니다. 다른 처리 기능이 현재 개체에 바인딩되어 있어도 개체에 바인딩된 모든 이벤트는 바인딩 순서대로 실행됩니다.
코드 복사
코드는 다음과 같습니다.
$("div a").click(function () {
// 작업 수행
})
$("div a").click(function (e) {
// 다른 작업 수행
e.stopImmediatePropagation()
})
$("div a").click(function () {
// 절대 실행되지 않습니다
})
$("div").click(function () {
// 절대 실행되지 않습니다
});
이 예제가 어색해 보인다고 생각할 수도 있지만 가끔 그런 일이 발생합니다. 코드가 매우 복잡하면 다른 위젯과 플러그인이 동일한 개체에 이벤트를 추가할 수 있습니다. 이러한 상황이 발생하면 필요합니다. stopImmediatePropagation을 이해하고 사용하는 방법을 알아보세요.
함수의 첫 번째 줄일 필요는 없지만 여기서 원칙은 다음과 같습니다. 함수의 기능이 JS를 통해 구현되는 경우(서버 측 상호 작용이 포함되지 않음) 이 경우 호환성을 고려할 필요가 없습니다. 이 경우 첫 번째 줄에 추가하면 # 문자가 URL에 표시되는 것을 방지할 수 있지만 사용자가 혼동하지 않도록 가능한 한 많은 오류 처리 코드를 추가해야 합니다. 오류가 발생했을 때.
$("div a").click(function () {
// 작업 수행
})
$("div a").click(function (e) {
// 다른 작업 수행
e.stopImmediatePropagation()
})
$("div a").click(function () {
// 절대 실행되지 않습니다
})
$("div").click(function () {
// 절대 실행되지 않습니다
});
이 예제가 어색해 보인다고 생각할 수도 있지만 가끔 그런 일이 발생합니다. 코드가 매우 복잡하면 다른 위젯과 플러그인이 동일한 개체에 이벤트를 추가할 수 있습니다. 이러한 상황이 발생하면 필요합니다. stopImmediatePropagation을 이해하고 사용하는 방법을 알아보세요.
거짓 반환 preventDefault와 stopPropagation이 동시에 필요하고 콜백 실행이 완료될 때까지 멈추지 않는 브라우저의 기본 동작을 코드에서 허용할 수 있는 경우에만 "return false"를 사용할 수 있습니다. 하지만 다른 jQuery 개발자를 위해 작성된 데모 코드에서는 이 방법을 사용하지 않는 것이 좋습니다. 더 많은 오용을 초래할 수 있기 때문입니다. 그리고 꼭 필요한 경우에만 "return false"를 사용하세요.
적절한 위치를 선택하세요"return false"를 사용하면 콜백 함수가 실행된 후에만 브라우저의 기본 동작이 취소되지만 e.preventDefault를 사용하면 더 많은 옵션이 있어 언제든지 브라우저를 중지할 수 있습니다. 함수에서 어디에 배치하는지.
1. 개발 단계에서는항상 첫 번째 줄에 넣어야 합니다. 마지막으로 하고 싶은 일은 양식을 Ajax 제출로 변경하기 위해 디버깅할 때 양식이 이미 이전 방법에 따라 제출되었다는 것입니다.
2. 제품 단계점진적 향상을 사용하는 경우 콜백 끝이나 일반 페이지에서 점진적인 향상을 사용하는 경우 논리적 끝점에 배치해야 합니다. 브라우저가 JS를 지원하지 않거나 비활성화된 경우 링크의 클릭 이벤트와 양식의 제출 이벤트를 서버 측에서 처리하는 방법을 고려하십시오. 여기서 장점은 JS를 끄는 경우를 고려하지 않고 js를 지원할 때의 광란만 고려한다는 것입니다. 콜백 코드에서 오류가 발생하고 예외가 발생하는 경우 다음 코드를 살펴보겠습니다.
코드 복사 코드는 다음과 같습니다.
var data = $("a"). click(function (e ) {
e.preventDefault(); // 기본 동작 취소
// `my`가 정의되지 않았기 때문에 오류가 발생합니다.
$("body").append(data.my .link);
// 원래 링크가 작동하지 않으며
// 사용자에게 아무 것도 남지 않습니다.
이제 동일한 이벤트와 하단에 PreventDefault 호출을 배치한 효과를 살펴보겠습니다.
e.preventDefault(); // 기본 동작 취소
// `my`가 정의되지 않았기 때문에 오류가 발생합니다.
$("body").append(data.my .link);
// 원래 링크가 작동하지 않으며
// 사용자에게 아무 것도 남지 않습니다.
이제 동일한 이벤트와 하단에 PreventDefault 호출을 배치한 효과를 살펴보겠습니다.
코드 복사 코드는 다음과 같습니다.>
var data = {} $("a").click(function (e) {
// `my`가 정의되지 않았기 때문에 오류가 발생했습니다.
$ ("body").append(data.my.link)
// 이 줄에 도달하지 않으며 웹사이트
// 대체됩니다.
// "멋지네요" 깨진 JavaScript!
e.preventDefault(); // 기본 동작 취소
이것 코드가 항상 제대로 작동할 것이라고 기대하지 마십시오. 코드가 잘못되지 않을 것이라고 가정하는 것보다 오류가 발생할 때 올바른 응답을 받는 것이 더 좋습니다.
3. 제품 단계에서
JS로 디자인한 기능이라면 첫 번째 줄에 넣어야 합니다. // `my`가 정의되지 않았기 때문에 오류가 발생했습니다.
$ ("body").append(data.my.link)
// 이 줄에 도달하지 않으며 웹사이트
// 대체됩니다.
// "멋지네요" 깨진 JavaScript!
e.preventDefault(); // 기본 동작 취소
이것 코드가 항상 제대로 작동할 것이라고 기대하지 마십시오. 코드가 잘못되지 않을 것이라고 가정하는 것보다 오류가 발생할 때 올바른 응답을 받는 것이 더 좋습니다.
3. 제품 단계에서
함수의 첫 번째 줄일 필요는 없지만 여기서 원칙은 다음과 같습니다. 함수의 기능이 JS를 통해 구현되는 경우(서버 측 상호 작용이 포함되지 않음) 이 경우 호환성을 고려할 필요가 없습니다. 이 경우 첫 번째 줄에 추가하면 # 문자가 URL에 표시되는 것을 방지할 수 있지만 사용자가 혼동하지 않도록 가능한 한 많은 오류 처리 코드를 추가해야 합니다. 오류가 발생했을 때.
결론
브라우저가 기본 동작을 수행하지 못하도록 해야 하는 경우 올바른 선택을 하는 데 이 기사가 충분한 정보를 전달하기를 바랍니다. 수행 중인 작업을 실제로 알고 있는 경우에만 "return false"를 사용하고 함수의 올바른 위치에서 해당 코드를 호출하고 있는지 확인하십시오. 마지막으로, 코드를 최대한 유연하게 유지하고 "false 반환"을 다시 사용하지 마세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.