HTML 앵커 링크-href와 onclick 둘 다?

일부 자바 스크립트를 실행하는 앵커 태그를 작성하고 href에서 가져 가는 곳으로 이동 합니다. 내 자바 스크립트 다음 세트를 실행하는 함수를 호출 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();"하고 함수에서 true 또는 false를 반환합니다.

함수를 실행하고 앵커 태그가 작업을 수행하도록하려면 return false명령문을 제거하면 됩니다.

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

깨끗한 HTML 구조를 할 때 이것을 사용할 수 있습니다.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

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

<a href="#Foo" id="link_1">Do it!</a>