programing

HTML 앵커 링크 - href를 클릭하고 둘 다 클릭하시겠습니까?

sourcejob 2023. 9. 1. 20:49
반응형

HTML 앵커 링크 - href를 클릭하고 둘 다 클릭하시겠습니까?

나는 자바스크립트를 실행한 다음 어디든 갈 수 있는 앵커 태그를 만들고 싶습니다.href그것을 가져가는 중이었습니다.내 JavaScript를 실행한 다음 설정하는 함수 호출window.location또는top.location에게href위치가 저한테는 안 맞아요.

페이지에 ID가 "Foo"인 요소가 있다고 상상해 보세요.다음과 유사한 앵커를 작성하고 싶습니다.

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

이 옵션을 클릭하면 RunMyFunction을 실행한 다음 페이지를 건너뜁니다.#Foo(재로드를 유발하지 않음 - 사용top.location페이지를 다시 로드합니다.

제안?여기에 도움이 된다면 jQuery를 사용하게 되어 기쁩니다...

그저.return true대신에?

의 반환 값onClick코드는 링크의 고유한 클릭 작업이 처리되는지 여부를 결정합니다 - 반환false처리되지 않음을 의미하지만, 만약 당신이 돌아온다면.true그러면 브라우저는 당신의 기능이 돌아온 후에 그것을 처리하고 적절한 앵커로 이동할 것입니다.

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

그리고.

function runMyFunction() {
  //code
  return true;
}

이렇게 하면 기능이 실행되고 링크를 따라 기능이 성공적으로 실행된 후 링크를 정확히 따라가게 됩니다.

기능 실행이 성공적인 경우에만 링크가 위치를 변경해야 하는 경우 다음을 수행합니다.onclick="return runMyFunction();"함수에서 참 또는 거짓을 반환합니다.

기능을 실행하고 앵커 태그가 제 기능을 수행하도록 하려면 다음을 제거하기만 하면 됩니다.return false진술.

참고로 인라인 JS는 최적의 작업 방식이 아니기 때문에 이벤트 핸들러를 대신 사용해야 합니다.

HTML 구조를 정리할 때 이 작업을 수행할 수 있습니다.

const element = document.getElementById('link_1')
element.onClick = function (e) {
    e.preventDefault()
    window.open('_top', element.getAttribute('href'))
}

jQuery 사용

$('a#link_1').click(function (e) {
    e.preventDefault()
    const a = e.target
    window.open('_top', a.getAttribute('href'))
})

언급URL : https://stackoverflow.com/questions/1346043/html-anchor-link-href-and-onclick-both

반응형