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

여러 번 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가 비활성화되면 링크가 아무것도하지 않음을 의미합니다.

onclick 이벤트에서 return false를 사용하면 브라우저가 href 속성의 링크를 따라가는 나머지 실행 스택을 처리하지 않습니다.

즉, return false를 추가하면 href가 작동하지 않습니다. 귀하의 예에서, 이것은 정확히 당신이 원하는 것입니다.

버튼에서는 onclick이 실행되는 모든 것이므로 처리 할 필요가 없습니다. 처리하고 이동할 href가 없습니다.

false 반환은 기본 조치를 취하지 말 것을 말하는 것이며,이 경우 <a href>링크를 따라가는 것입니다. onclick에 false를 반환하면 href가 무시됩니다.

브라우저 해킹 : http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

false를 반환하면 탐색이 방지됩니다. 그렇지 않으면 위치는 someFunc의 반환 값이됩니다.

return false방지의 페이지 탐색 및 상단 또는 하단에 윈도우의 불필요한 스크롤된다.

onclick="return false"

onmousedown대신에 언급 된 사람이 없다는 것에 놀랐습니다 onclick. 그만큼

onclick='return false'

브라우저의 기본 동작을 포착하지 않아 (때로는 원치 않는) 텍스트 선택이 발생 mousedown하지만

onmousedown='return false'

그렇습니다.

즉, 버튼을 클릭하면 버튼의 모양을 변경하여 텍스트가 실수로 선택되어 원하지 않는 경우가 있습니다. 이것이 우리가 여기서 방지하려는 기본 동작입니다. 그러나 mousedown이벤트는 이전 click에 등록 되었으므로 click핸들러 내에서 해당 동작 만 방지 하면 mousedown이벤트 에서 발생하는 원하지 않는 선택에 영향을 미치지 않습니다 . 따라서 텍스트는 여전히 선택됩니다. 그러나 mousedown이벤트 기본값을 사용 하지 않으면 작업이 수행됩니다.

event.preventDefault () vs. false 반환 도 참조하십시오.

내 HTML 페이지에이 링크가 있습니다 :

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

setBodyHtml () 함수는 다음과 같이 정의됩니다.

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

링크를 클릭하면 링크가 사라지고 브라우저에 표시되는 텍스트가 "새 컨텐츠"로 바뀝니다.

그러나 링크에서 "거짓"을 제거하면 링크를 클릭해도 아무것도 보이지 않습니다. 왜 그런 겁니까?

false를 반환하지 않으면 링크를 클릭하고 대상 페이지를 표시하는 기본 동작이 취소되지 않기 때문입니다. 그러나 여기서 하이퍼 링크의 href는 ""이므로 SAME 현재 페이지로 다시 연결됩니다. 따라서 페이지가 효과적으로 새로 고쳐지고 아무 일도 일어나지 않습니다.

백그라운드에서 setBodyHtml () 함수는 여전히 실행됩니다. body.innerHTML에 인수를 할당합니다. 그러나 페이지가 즉시 새로 고쳐 지거나 다시로드되기 때문에 수정 된 본문 내용이 몇 밀리 초 이상 표시되지 않으므로 볼 수 없습니다.

이 예는 때때로 "return false"를 사용하는 것이 유용한 이유를 보여줍니다.

링크에 SOME href를 할당하여 밑줄이 표시된 텍스트로 링크로 표시하고 싶습니다. 그러나 링크를 클릭하여 페이지를 효과적으로 다시로드하고 싶지는 않습니다. 기본 탐색 = 동작을 취소하고 함수를 호출하여 계속 적용하여 부작용이 발생하기를 원합니다. 그러므로 나는 "거짓을 돌려줘야한다".

위의 예는 개발 중에 빠르게 시도해 볼 수있는 것입니다. 프로덕션에서는 JavaScript로 클릭 핸들러를 할당하고 그 대신 preventDefault ()를 호출합니다. 그러나 빠른 시도를 위해 위의 "거짓 반환"이 트릭을 수행합니다.

양식을 사용할 때 제출을 막기 위해 '거짓 반환'을 사용할 수 있습니다.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>