html 태그의 onclick 및 href 실행 순서에 대한 자세한 설명

onclick 이벤트가 먼저 실행되고 이어서 href에 정의된 이벤트(페이지 점프 또는 자바스크립트)가 실행됩니다.

동시에 두 개의 정의가 있는 경우(onclick과 href가 모두 정의됨) href 동작을 방지하려면, onclick Return false를 추가해야 합니다. 일반적으로 onclick="xxx();return false;"라고 작성합니다.

href에 정의된 함수에 반환 값이 있으면 현재 페이지의 내용이 반환 값으로 대체됩니다

페이지가 너무 길면 스크롤바가 나타나며 링크의 onclick 이벤트를 통해 작업을 수행하려고 합니다. href 속성은 # 대신 javascript:void(0);로 설정해야 불필요한 페이지 이동을 방지할 수 있습니다.

그래서 더 권장되는 작성 방법은

<a href="javascript:void(0)" onclick="fn(this)"> 
<a href="javascript:void(0);" onclick="javascript:goUrl(&#39;http://www.sina.com&#39;);return false;">跳转3</a>
<a href="javascript:void(0)" onclick="subgo()">点我</a>

여기서 javascript:void(0)입니다. 실제 함수는 없습니다. 단지 데드 링크일 뿐이며 실행되는 함수는 subgo()입니다.

<a href="#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。

사실 #에는 위치 정보가 포함되어 있습니다. 기본 앵커는 웹 페이지 상단인 #top이고 javascript:void(0)는 아무런 정보도 없는 데드 링크만 나타냅니다. 따라서 스크립트를 호출할 때는 void(0)

을 사용하는 것이 가장 좋습니다. href는 일반적으로 URL 주소를 가리킵니다. href="javascript:xxx();"와 같이 javascript를 호출할 수도 있습니다. 문서에는 xx가 있지만 이 방법은 복잡한 환경에서 가끔 이상한 문제를 일으키기도 합니다. javascript: 프로토콜을 A. 의 href 속성으로 사용하면 window.onbeforeunload 이벤트가 불필요하게 트리거될 뿐만 아니라 애니메이션 gif 이미지가 IE에서 재생을 중지하게 됩니다.

이러한 링크를 클릭하면 두 가지 상황이 발생합니다. 1. dosomthing이 true를 반환하면 브라우저는 cool.html로 이동하고 반대로 false를 반환하면 href가 무시됩니다. 그래서 이 기능을 활용하면 다음과 같은 코드를 작성할 수 있습니다...

<a href="cool.html" onclick = "doSomething()">做点什么吧</a>
function doSomething(){
return confirm("您确认要离开吗");
}
function doSomething(){
var ret = confirm("确认要离开吗?");
if(ret){
window.loaction.href = "cool.html";
}
}

위 내용은 html 태그의 onclick 및 href 실행 순서에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!