집 > 기사 > 웹 프론트엔드 > HTML의 a 태그에서 href와 onclick 사용의 차이점과 우선순위

HTML의 a 태그에서 href와 onclick 사용의 차이점과 우선순위

不言원래의: 2018-06-09 17:01:102247검색

이 글은 HTML A 태그에서 href와 onclick의 사용법, 차이점, 우선순위에 대한 글을 주로 공유합니다. 더 알고 싶은 친구들은 한 번 살펴보세요. 속성으로 인해 IE6은 hover에 응답하지 않습니다. 두 번 클릭하면 레이블 대신 레이블의 상위 컨테이너가 선택됩니다(이 문제는 IE에서 발생합니다).

코드는 다음과 같습니다.

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">

이 요소를 가져와야 하는 fn 메서드가 있다고 가정합니다. 첫 번째 메서드에서 전달된 this는 null 값입니다.

그래서 더 추천드리는 작성방법은

코드는 다음과 같습니다

<a href="javascript:void(0)" onclick="fn(this)">

subgo() 함수를 실행하는 코드는 다음과 같습니다.

코드는 다음과 같습니다

<a href="javascript:void(0)" onclick="subgo()">点我</a>

여기, javascript:void (0), 활성화된 물질이 없습니다. 함수는 단지 데드 링크일 뿐이며 실행되는 함수는 subgo()입니다.

코드는 다음과 같습니다

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

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

href는 일반적으로 URL 주소를 가리키며, href="javascript:xxx();"와 같이 javascript를 호출할 수도 있습니다. 문서에서는 이렇게 작성할 것을 권장합니다. :

코드는 다음과 같습니다

<a href="http://www.jb51.net/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>

그러나 이 방법은 복잡한 환경에서 때때로 이상한 문제를 일으킬 수 있습니다. A의 href 속성으로 javascript: 프로토콜을 사용하지 마십시오. 이렇게 하면 window.onbeforeunload 이벤트가 불필요하게 트리거될 뿐만 아니라 , 또한 IE에서 gif 애니메이션이 발생하여 사진 재생이 중지됩니다.

링크의 onclick 이벤트가 먼저 실행된 다음 href 속성(페이지 점프 또는 자바스크립트 의사 링크) 아래의 작업이 실행된다는 것을 알고 있습니다. href 속성 아래의 작업을 실행하지 않으려면 onclick을 수행해야 합니다. return false 일반적으로 onclick="xxx();return false;"와 같이 작성합니다.

TabPane의 JS 소스 코드에서는 onclick이 FALSE를 반환하지 않기 때문에 IFRMAE에서 TABPANE을 닫으면 href 실행 및 페이지가 발생합니다. 디스플레이 문제. 해결책은 TAB을 사용하여 다음 코드를 JSP에 복사하는 것입니다.

Html A 태그에서 href와 onclick을 동시에 사용하는 우선순위

1 Order

ie 6: href는 onclick을 먼저 트리거한 다음 트리거합니다

다른 브라우저는 onlick을 먼저 트리거한 다음 href

를 트리거합니다.

2 href="javascript: xxx()"

이것을 매개변수로 전달할 수 없습니다

onclick can

코드는 다음과 같습니다

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this);">

3 먼저 트리거된 메소드가 false를 반환하면 후자의 이벤트 트리거되지 않습니다

예를 들어

코드는 다음과 같습니다

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this); return false;">

ee7959cc8dd4be16ef633321c03dac32 페이지가 북마크 위치에 위치하게 됩니다.

1번과 4번 이유

로 인해 둘 다 ie6 ea1f6b0bb3cace4ad0a57947e14c8f2f 다음 예시와 같습니다.

첫 번째와 두 번째 클릭에서 href에 액세스하고 세 번째 이후에 다른 주소에 액세스하려면 A가 필요합니다

코드는 다음과 같습니다

var href=0
function clicka(obj)
{
 if (href==2)
 {
 obj.href="http://www.baidu.com?qc";
 }else
 {
 href++;
 }
 return true;
}
 <a href="http://www.jb51.net/" target=_blank id="showa" onclick="clicka(this)"> 开屏高速下载 </a>

href에서 javascript를 사용하는 것과 a 태그 onclick을 사용하는 것의 차이점 링크의 onclick 이벤트가 먼저 실행된 다음 href 속성(페이지 점프 또는 자바스크립트 의사 링크) 아래의 작업이 실행됩니다.

작업을 원할 경우 링크에 href와 onclick이 모두 있다고 가정합니다. 실행되지 않는 href 속성에서 onclick은 false 반환 값을 얻어야 합니다. 믿을 수 없다면 goGoogle 함수에서 false 반환을 주석 처리할 수 있습니다.

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

링크의 href 속성에서 반환 값이 있는 함수가 호출되면 현재 페이지의 콘텐츠가 이 함수의 반환 값으로 대체됩니다.

Shift 키를 누르고 있으면 차이가 발생합니다.

오늘 제가 겪은 문제는 IE6.0에서 href 형식으로 parentNode에 접근할 수 없다는 것입니다.

A의 href 속성으로 javascript: 프로토콜을 사용하지 마세요. 이렇게 하면 window.onbeforeunload 이벤트가 불필요하게 트리거될 뿐만 아니라 IE에서 애니메이션 gif 이미지 재생도 중지됩니다.

그렇습니다. 이것에 많은 시간을 보냈습니다.

[이유]

CheckBoxList 컨트롤을 사용할 때 각 체크박스 뒤에 링크를 추가하는 기능을 구현하고 싶습니다. 일부 기능을 구현하려면 링크를 클릭하는 것 외에도 체크박스를 선택해야 합니다.

코드는 다음과 같습니다

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label中的链接]</a></label>

최종적으로 parentNode를 이용하여 구현하였습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

HTML의 a 태그에서 href와 onclick 사용의 차이점과 우선순위

관련 기사