[javascript] 클릭 이벤트 리스너에 ‘return false’를 추가하면 어떤 효과가 있습니까?

JAVASCRIPT / 글쓴이

여러 번 HTML 페이지에서 다음과 같은 링크를 보았습니다.

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

return false거기 의 효과는 무엇입니까 ?

또한 버튼에는 일반적으로 표시되지 않습니다.

이것은 어디서나 지정되어 있습니까? w3.org의 일부 사양에서?

답변

이벤트 핸들러의 반환 값은 기본 브라우저 동작도 수행해야하는지 여부를 결정합니다. 링크를 클릭하는 경우 링크를 따라 가지만 양식 제출 핸들러에서 차이점이 가장 두드러집니다. 사용자가 정보를 잘못 입력 한 경우 양식 제출을 취소 할 수 있습니다.

이에 대한 W3C 사양이 있다고 생각하지 않습니다. 이와 같은 모든 고대 JavaScript 인터페이스에는 별명 “DOM 0″이 지정되었으며 대부분 지정되지 않았습니다. 오래된 Netscape 2 설명서를 읽는 것이 운이 좋을 수도 있습니다.

이 효과를 얻는 현대적인 방법은 호출하는 event.preventDefault()것이며, 이는 DOM 2 Events 사양에 지정되어 있습니다.

답변

다음 예제에서 차이점을 볼 수 있습니다.

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

“확인”을 클릭하면 true가 반환되고 링크가 이어집니다. “취소”를 클릭하면 false가 반환되고 링크를 따라 가지 않습니다. 자바 스크립트가 비활성화되면 링크가 정상적으로 수행됩니다.

답변

모든 브라우저에서 기본 동작 및 이벤트 버블 링을 취소하는보다 강력한 루틴이 있습니다.

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

이벤트 핸들러에서이를 사용하는 방법의 예 :

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context)
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

답변

무엇 “반환 거짓” 정말거야?

return false는 실제로 호출 할 때 세 가지 매우 별도의 작업을 수행합니다.

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

자세한 내용은 jquery-events-stop-misusing-return-false 를 참조하십시오.

예를 들면 다음과 같습니다.

이 링크를 클릭하는 동안 false를 반환 하면 브라우저의 기본 동작 이 취소 됩니다 .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

답변

JavaScript 이벤트에서 false를 다시 설정하면 일반적으로 “기본”동작이 취소됩니다. 링크의 경우 링크를 따르지 않도록 브라우저에 지시합니다.

답변

표준 이벤트가 발생하지 않는다고 생각합니다.

귀하의 예에서 브라우저는 #로 이동하지 않습니다.

답변

false를 반환하면 자바 스크립트가 실행 된 후 하이퍼 링크가 중단됩니다. 이는 예리하게 저하되는 눈에 잘 띄지 않는 자바 스크립트에 유용합니다. 예를 들어, 자바 스크립트를 사용하여 전체 크기 이미지의 팝업을 여는 축소판 이미지가있을 수 있습니다. 자바 스크립트가 꺼져 있거나 이미지가 가운데 클릭 (새 탭에서 열림)되면 onClick 이벤트를 무시하고 이미지를 전체 크기의 이미지로 정상적으로 열립니다.

false 반환을 지정하지 않으면 이미지가 팝업을 시작하고 이미지를 정상적으로 엽니 다. return false를 사용하는 대신 일부 사람들은 javascript를 href 속성으로 사용하지만 이는 javascript가 비활성화되면 링크가 아무것도하지 않음을 의미합니다.