development

자바 스크립트 onclick 이벤트가있는 HTML 앵커 태그

big-blog 2020. 10. 28. 08:25
반응형

자바 스크립트 onclick 이벤트가있는 HTML 앵커 태그


Google을 사용하면서 앵커 태그에서 onclick 이벤트를 사용하고 있음을 발견했습니다.

에서 구글의 헤더 부분에있는 옵션은 수직 태그처럼 보이지만, 리디렉션하지만 메뉴를 열되지 않습니다 onclicking. 일반적으로 사용할 때

<a href='more.php' onclick='show_more_menu()'>More >>></a>

일반적으로 실행되지 않고 'more.php'로 이동 show_more_menu()하지만 해당 페이지 자체에 메뉴를 표시했습니다. Google 처럼하는 방법 ?


onclick 함수가 false를 반환하면 기본 브라우저 동작이 취소됩니다. 이와 같이 :

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

어느 쪽이든, 구글이 그것을하든 안하든 그다지 중요하지 않습니다. 자바 스크립트 내에서 onclick 함수를 바인딩하는 것이 더 깔끔합니다. 이렇게하면 HTML을 다른 코드와 분리 할 수 ​​있습니다.


아래 옵션을 시도해 볼 수도 있습니다.

<a href="javascript:show_more_menu();">More >>></a>

내가 이해 한 바에 따르면 링크를 클릭 할 때 리디렉션을 원하지 않습니다. 넌 할 수있어 :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

다음 코드를 사용하여 메뉴를 대신 href 주소로 이동하십시오.

function show_more_menu(e) {
  if(!confirm('Do you want to go to: '+e.target.href)) e.preventDefault();;
}
<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

참고 URL : https://stackoverflow.com/questions/7347786/html-anchor-tag-with-javascript-onclick-event

반응형