> 웹 프론트엔드 > HTML 튜토리얼 > 태그에 클릭 이벤트를 추가하는 것과 관련된 문제와 해결 방법을 공유하세요.

태그에 클릭 이벤트를 추가하는 것과 관련된 문제와 해결 방법을 공유하세요.

零下一度
풀어 주다: 2017-05-10 15:16:39
원래의
2974명이 탐색했습니다.

어제 페이지 이동을 변경할 때 a 태그의 "href" 속성이 비어 있는 경우 문제가 발생했습니다(예: Modify< ;/a>, 수정 링크를 클릭했을 때 해당 수정 페이지로 이동하지 않고 이 페이지만 새로 고침했습니다. 클릭 시 전혀 반응이 없습니다. 나중에 동료들과 논의한 결과 javascript:void(0)" onclick="roleupdate()">Modify , 즉 "href" 속성에 "javascript:void(0)" 또는 "#"을 추가하면 페이지 점프가 가능하므로 개인적으로 "a" 태그에 "href" 속성 값을 넣으면 안된다고 생각합니다. 비어 있는.

누구나 쉽게 배울 수 있도록 "a" 태그에 클릭 이벤트 를 사용하는 여러 가지 방법을 아래와 같이 정리했습니다.

<a href="JavaScript:js_method();"</a>
로그인 후 복사

이것이 우리 플랫폼에서 흔히 사용되는 방법이지만, 이 방법은 이와 같은 매개변수를 전달할 때 문제가 발생하기 쉽고, a의 href 속성으로 javascript: 프로토콜을 사용하는 경우 불필요한 트리거링을 유발할 뿐만 아니라 window.onbeforeunload 이벤트가 발생하고 IE에서 gif가 발생하여 애니메이션 사진 재생이 중지됩니다. W3C 표준에서는 href

<a href="javascript:void(0);" onclick="js_method()"</a>
로그인 후 복사

에서 javascript 문을 실행하는 것을 권장하지 않습니다. 이 방법은 많은 웹사이트에서 가장 일반적으로 사용되는 방법이자 가장 포괄적인 방법이기도 합니다. onclick 방법은 js 기능 실행을 담당합니다. 🎜>, void는 연산자 인 반면, void(0)는 정의되지 않은 값을 반환하고 주소는 점프하지 않습니다. 그리고 이 메서드는 첫 번째 메서드처럼 js 메서드를 브라우저의 상태 표시줄에 직접 노출하지 않습니다.

3.<a href="javascript:;" onclick="js_method()"</a>
로그인 후 복사

이 방법은 두 가지 방법과 비슷하지만 유일한 차이점은 빈 js 코드가 실행된다는 것입니다.

4.<a href="#" onclick="js_method()"</a>
로그인 후 복사

이 메소드도 인터넷에서 아주 흔히 볼 수 있는 코드입니다. #은 태그에 내장된 메소드로, top의 역할을 나타냅니다. 따라서 이 방법을 사용하여 웹페이지를 클릭하면 페이지 상단으로 돌아갑니다.

5.<a href="#" onclick="js_method();return false;"</a>
로그인 후 복사
이 메소드는 js 기능을 실행하기 위해 클릭한 후 false를 반환합니다. 페이지는 실행 후에도 페이지의 현재 위치에 그대로 유지됩니다.

타오바오 홈페이지를 보니 두 번째 방법을 사용하고 있는데, 알리바바 홈페이지는 첫 번째 방법을 사용하고 있는데, 각 href의 javascript 방식이 try , catch를 사용한다는 점이에요.

[관련 추천]

1.

무료 HTML 온라인 동영상 튜토리얼

html 개발 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

위 내용은 태그에 클릭 이벤트를 추가하는 것과 관련된 문제와 해결 방법을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿