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

86

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

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

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

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

— 스마트 키드
소스

120

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

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

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

— TJHeuvel
소스

3

1. 더 확실하게하려면 # in href = "#"를 사용하고 javascript 내에서 필요한 작업을 수행하십시오. # href로 해당 링크를 클릭하는 것이 안전합니다. 페이지가 URL을 떠나거나 새로 고침합니다.

— Bimal Poudel

5

HTML5 규칙 href="#"에 페이지 상단으로 이동해야한다고 명시되어 있으므로 위의 조언을주의해서 따르십시오 . href콘텐츠없이 속성을 간단히 추가 하고 클릭 동작을 얻을 수 있습니다. Assinging #(오히려 단일 페이지 100 % 높이 애플 리케이션에 비해) 실제 페이지의 URL로하는 것은 일반적으로 좋은 생각입니다.

— Mike 'Pomax'Kamermans

참고로, CSS 클래스를 요소에 바인딩 한 다음 별도의 CSS 파일에 세부 스타일을 지정하는 것과 같은 방식으로 인라인 이벤트 핸들러 함수 를 요소 에 바인딩 한 다음 세부 구현을 지정하는 것이 좋습니다. 별도의 JS 파일에서 해당 기능. HTML 파일은 웹 페이지의 구조, 모양 및 동작을 선언하는 곳입니다. 자세한 구현은 다른 곳에 있습니다. 그것은 당신이 정말로 원하는 분리의 종류입니다.

— Sarsaparilla

54

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

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

— sun2
소스

1

경고 : 함수가 명시 적 값 (예 : return null;,하지만 아님 return;)을 반환하면 FireFox와 같은 일부 브라우저에서 의도하지 않은 결과가 발생합니다. 페이지에는 모든 콘텐츠가 문자열 형식 (예 :)의 반환 된 값으로 대체됩니다 [object Object].

— rannmann

45

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

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

— 아 디트 야 마노 하르
소스

3

이것은 href가 아무데도 가리 키지 않기를 원할 때 유용합니다.

— kbpontius

멋지고 작동하지만 jquery에서 "오류 : 구문 오류, 인식 할 수없는 표현식 : javascript :;"오류가 발생합니다.

— TheOddCoder

jQuery 버전 1.10.2를 사용하고 있는데 @TheOddCoder에서 발생한 구문 오류가 발생하지 않습니다.

— Mike Finch

1

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

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

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

스 니펫 확장

— 카밀 키에 우 체프 스키
소스