ie6 아래 a 라벨의void(0)로 인한 괴이한 문제에 대한 사고

로 바꾸는 등 의미가 강한 라벨이 아니에요.   문제의 원인 심도 있는 분석:왜 이 문제가 발생했을까?javascript:void(0):JavaScript에서 void는 표현식을 계산하지만 값을 반환하지 않도록 지정하는 연산자입니다.void 조작부호의 용법 형식은 다음과 같다.javascript:void (expression)     2. javascript:void expression expression은 계산할 JavaScript 표준 표현식입니다.표현식 바깥쪽의 원괄호는 선택할 수 있지만, 쓰는 것은 좋은 습관이다.(버전 Navigator 3.0 구현)void 조작부호를 사용하여 슈퍼 링크를 지정할 수 있습니다.표현식은 계산되지만 현재 문서에 내용을 불러오지 않습니다.다음 코드는 사용자가 클릭한 후에 아무 일도 일어나지 않도록 슈퍼 링크를 만들었습니다.사용자가 링크를 클릭하면 void(0)는 0으로 계산되지만 JavaScript에서는 아무런 효과가 없습니다.아무 일도 일어나지 않으려면 여기를 클릭하십시오
다음 코드는 사용자가 클릭하면 폼을 제출할 수 있는 슈퍼 링크를 만들었습니다.
양식을 제출하려면 여기를 클릭
그래서 우리는 이러한 결과가 발생한 것은 IE6가 onclick 코드를 실행하고 href의 내용을 다시 실행하고 href에서javascript:void(0)를 사용하기 때문이라는 것을 알게 되었다.또는javascript:;점프를 실행하는 코드가 효력을 상실할 것입니다. 
   
이 문제에 대한 인용적 사고
우선,javascript:void(0)가 꾸민 귀신임을 알았습니다.javascript:void(0)는 쓰지 않아도 됩니까?안 됩니다. a의 href의 기본 이벤트를 차단해야 하기 때문입니다. 이것은 aax의 작업이기 때문입니다.
그래서 나는 또 다른 문제가 생각났다. 바로 여기에 반드시 a라벨을 써야 하는가 하는 것이다.페이지를 만들 때, 많은 경우 a탭 디스플레이:block으로 나중에 button 등을 대체하는데, 이렇게 하는 것이 적합합니까?
마찬가지로javaeye에 있습니다.com 이 화제 를 보고 토론 이 매우 재미있다
아래의 토론은'사조'의 블로그에서 유래한 것으로 대체로 다음과 같다.
라벨 의미 사고
우선, 링크 a와 버튼 button은 의미가 있기 때문에 사용의 편리함으로 바꿀 수 없습니다.a는 anchor의 줄임말로 내비게이션이나 위치를 정하는 닻이다.전형적인 용법은

<a href="http://www.w3c.org/">W3C Web Site</a>
<a name="anchor-one">This is the location of anchor one.</a>
<a href="#anchor-one">Link to anchor one</a>

name과 href 속성을 동시에 지정할 수 있는데 이것은 기초 지식이니 의문이 있으면 참고하세요HTML 4.01 사양.그리고 버튼 (button과 < input type = "button/submit"/> 포함).의미에서 볼 때 단추는 표의 일부분이고 촉발하는 동작은 표와 관련이 있다.만약 표 조작이 아예 없다면 단추를 사용해서는 안 된다.예를 들어 위 그림은 일부 링크이다. 비록 button처럼 생겼지만 의미는 a. 위 그림의 표시와 정렬 단추이고 조작표이다.어의상으로는 button이나 input이 더 적합하다.(주의: 타오바오 검색 결과 페이지에서 현재 채택하고 있는 것은 a입니다. 이것은 점진적인 강화를 고려한 것입니다. 다음에 언급할 것입니다)
한 마디로 하면 링크와 단추는 각자의 의미와 사용 장면이 있기 때문에 마음대로 바꾸어 사용할 수 없다. 

서법 분석

세계는 영원히 그렇게 간단하지 않다. 현재JavaScript가 일중천의 웹 세계에서 링크 a는 js 이벤트를 촉발하는 데 자주 사용된다.

<a href="" onclick="something()">test 1</a>
<a href="#" onclick="something();return false">>test 2</a>
<a href="javascript: void(0)" onclick="something()">>test 3</a>
<a href="javascript: void something()">test 4</a>

우선, 첫 번째 쓰기 방법이 i에서 문제가 있는데 그 이유는 ie에서 자동으로 href 보충이다.두 번째 쓰기 방법은 onclick 이벤트에서 기본 이벤트를 직접 차단하기 때문에 href="#"의 #는 사실상 임의의 값일 수 있다.#을 사용하면 js가 없을 때 클릭한 후에 이 페이지에 머무르는 것을 고려한다. (주의: a가 한 화면 아래에 있을 때, 이러한 쓰기 방법은 페이지를 맨 위로 굴러가게 할 수 있다.)세 번째 쓰기 방법은href값은javascript 위조 프로토콜이고void는javascript의 일원 조작부호(예를 들어!,typeof)이다.void 조작부호의 역할은 뒤에 있는 표현식만 실행하고 값을 되돌려주지 않는 것입니다.보아하니 void(0)가 기본 이벤트를 막은 것 같지만, 실제적으로 아래의 쓰기는 문제없다.

<a href="javascript: void(1)" onclick="something()">>test 3</a>
<a href="javascript:;" onclick="something()">>test 3</a>
<a href="javascript:" onclick="something()">>test 3</a>
<a href="javascript: return true" onclick="something()">>test 3</a>

a의 기본 동작은 자바스크립트 위조 프로토콜의 내용이기 때문에 그 안에 void를 넣든 안 넣든 다른 이벤트를 일으키지 않는다.(주의: Opera에서 위조 프로토콜에 반환 값이 있을 때href가 바뀐다. 그래서 우리는 보통void(0) 또는 공문구를 쓴다) 세 번째 쓰기를 이해했고 네 번째 쓰기도 이해했다. href="javascript: void something()".이런 쓰기 방법의 장점은 마우스가 떠있을 때 사용자가 상태 표시줄을 통해 실행할 함수를 볼 수 있다는 것이다.개발자에게는 좋은 점일지 모르지만 일반 사용자에게는 신뢰감이 높아질까?아니면 공포감?데이터가 없으면 결론을 내릴 수 없다.
위의 맞춤법 외에 추천하는 맞춤법은class나 id를 통해 a에 훅을 추가하고 js에 훅을 통해 이벤트를 추가하는 것입니다. 
 

반성하다

나는 위의 각종 문법 중 어느 것이 가장 좋은지 토론하고 싶지 않다.왜 우리는 a로 js 사건을 촉발합니까?내가 생각할 수 있는 이유는 다음과 같다.

이렇게 하면 자동으로 마우스의 부상 양식을 가지게 된다

다들 이렇게 써

정말 이유가 생각이 안 나. 자연스러운 일이잖아

IE6는 css 스타일의 a:hover만 지원하고 href는 비어 있을 수 없기 때문

현탁 양식 외에는 실질적인 이유를 찾을 수 없다는 것을 알 수 있다.스타일 문제는 잠시 접어두고 예를 살펴보겠습니다. 위쪽은 Google Reader의 작업 표시줄입니다. 관심 있는 사람은 Firebug를 사용하십시오. 마우스의 부상 스타일도 전혀 문제가 되지 않습니다. css에 cursor: pointer 를 추가하면 됩니다.위의 예에서 우리는 결론을 얻을 수 있다. 만약에 js동작을 촉발하고 내비게이션이나 포지셔닝의 의미가 없다면span이나 다른 적합한 라벨을 사용하면 된다. a를 잘못 사용할 필요가 없다. (a로 오히려 문제를 일으킬 필요가 없다. 첫째, 기본 이벤트를 제거하는 것이다. 둘째, 상태막대의 정보는 일반 사용자를 현혹시키고 심지어 두려워하게 할 수 있다).물론 그 자체가 링크라면 네비게이션 전에 js 논리나 폼 정렬 등 응용을 추가하고 점진적인 측면에서 고려하면 가장 좋은 실천은 href 값을 모두 써서 js를 지원하지 않는 브라우저에서도 가용성을 확보하는 것이다.마지막으로 제 관점:

링크 a로 할까요, 버튼 button으로 할까요. 구체적인 사용 장면에 따라 button은 폼과 관련된 요소

입니다. a를 남용하지 마세요. href값이 무엇인지 모를 때(javascript 위협심이 나타나지 말고 외롭고 쓸쓸하지 마세요. #) 다른 탭을 선택하고 훅을 통해 js에 이벤트

를 추가하세요.동시에 onclick 이벤트가 있습니다. 점진적인 강화를 생각해서 href값의 완전성을 확보하세요