Programming

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

procodes 2020. 3. 1. 16:05
반응형

클릭 이벤트 리스너에 '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 () 및 false 반환을 참조하십시오.

참고 URL : https://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-a-click-event-listener



반응형