>  기사  >  웹 프론트엔드  >  태그의 href와 onclick에서 JavaScript를 사용하는 것의 차이점

태그의 href와 onclick에서 JavaScript를 사용하는 것의 차이점

黄舟
黄舟원래의
2017-07-27 13:44:381618검색

href에서 javascript를 사용하는 것과 태그 onclick을 사용하는 것의 차이점


⒈ 링크의 onclick 이벤트가 먼저 실행되고 그 다음에 href 속성(페이지 점프 또는 javascript 의사 링크) 아래의 작업이 실행됩니다. 링크에 href와 onclick이 동시에 있다고 가정합니다. href 속성 아래의 작업이 실행되지 않도록 하려면 onclick이 잘못된 반환 값을 얻어야 합니다.

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

⒋ 링크의 href 속성에서 반환 값이 있는 함수가 호출되면 현재 페이지의 내용은 다음과 같습니다. of는 이 함수의 반환 값으로 대체됩니다.

⒌ Shift 키를 누르고 있으면 달라집니다.

⒍ IE6.0에서는 parentNode에 href 형식으로 접근할 수 없습니다. javascript: 프로토콜을 A의 href 속성으로 사용하지 마십시오. 이렇게 하면 window.onbeforeunload 이벤트가 불필요하게 트리거될 뿐만 아니라 GIF 애니메이션 이미지가 IE에서 재생되지 않게 됩니다. 그게 다야, 이것에 많은 시간을 보냈습니다.

(IE6 이하)

<a href="javascript:void(0);" onclick="javascript:modifypassword();"><img src="images/blue/Modify.gif"/></a>

이렇게 작성하면 IE6 이하의 URL은 백엔드를 요청하지만 프론트엔드에서는 움직임이 없습니다.

올바른 작성 방법은

<a href="javascript:void(0);" onclick="javascript:modifypassword();return false;"><img src="images/blue/Modify.gif"/></a>

개인 소장품의 몇 가지 예입니다. 모두가 배울 수 있는 내용:

1:<a href="####"></a>
2:<a href="javascript:void(0)"></a>
3:<a href="javascript:void(null)"></a>
4:<a href="#" onclick="return false"></a>
5:<span style="cursor:hand"></span>(好像在FF中不能显示)

---------------------------- --------- ---------------------

JavaScript를 주의해서 사용하세요. void(0) 오늘 테스트해보니 프로그램이 실행된 것이 확실했습니다. 그리고 최종 결과는 정확했지만 페이지가 새로 고쳐지지 않았습니다.

FireFox2.0 및 IE7에서 테스트한 결과는 정상이지만 IE6은 새로 고쳐지지 않습니다! 주의 깊게 조사한 결과 페이지 링크가 548da03febfc62aacbe3479d7d01cd5f Test5db79b134e9f6b82c0b36e0489ee08ed라는 사실을 발견했습니다. 문제는 이 void에 있습니다. (0 ) on!

먼저 JavaScript에서 void(0)의 의미를 살펴보겠습니다. JavaScript에서 void는 표현식을 계산하도록 지정하지만 값을 반환하지 않는 연산자입니다.

void 연산자 사용 형식은 다음과 같습니다.


1. javascript:void (e-xpression)
2. javascript:void e-xpression

e-xpression은 평가할 JavaScript 표준 표현식입니다. 표현식 외부의 괄호는 선택 사항이지만 작성하는 것이 좋습니다. void 연산자를 사용하여 하이퍼링크를 지정할 수 있습니다. 표현식이 평가되지만 현재 문서에는 아무것도 로드되지 않습니다. 위의 코드는 사용자가 클릭해도 아무 작업도 수행하지 않는 하이퍼링크를 생성합니다. 사용자가 링크를 클릭하면 void(0)는 0으로 평가되지만 JavaScript에는 영향을 미치지 않습니다. 0408054196e655f677973fb4d7c99865여기를 클릭해도 아무 일도 일어나지 않습니다5db79b134e9f6b82c0b36e0489ee08ed즉, 페이지 전체를 새로 고치지 않고 일부 처리를 수행하려면 void( 0), 하지만 페이지를 새로고침해야 하는 경우에는 주의가 필요합니다. 실제로 b8b2c95f95a4a08805d07f81a44adb15, 이 문장은 제출 작업을 수행합니다. 그럼 어떤 상황에서 void(0)를 더 자주 사용하는 걸까요? 새로 고침을 하지 않으면 당연히 Ajax입니다. Ajax 웹 페이지를 보면 일반적으로 void(0)가 많이 나오므로 void를 사용할 때는 말이죠. (0) ), 이 페이지 전체를 새로 고쳐야 하는지 생각해 보는 것이 가장 좋습니다.

위 내용은 태그의 href와 onclick에서 JavaScript를 사용하는 것의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.