"javscript:void(0);" vs "return false" vs "preventDefault()"

"javscript:void(0);" vs "return false" vs "preventDefault()"

링크가 아무것도 하지 않고 자바스크립트 작업에만 응답하기를 원할 때 링크가 페이지 상단 가장자리로 스크롤되는 것을 피하는 가장 좋은 방법은 무엇입니까?
을 하는 몇 가지 방법을 있습니다.은 모두 잘하는 것 .다. 모두 잘 작동하는 것 같습니다.

<a href="javascript:void(0)">Hello</a>

아니면

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(){
      //...
      return false;
    });
  });
</script>

그리고 심지어:

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(event){
      event.preventDefault();          
      //...
    });
  });
</script>

당신은 어떤 조건을 선호하십니까? 왜? 어떤 조건을 선호하십니까?

추신: 물론 위의 예들은 당신이 jquery를 사용하고 있다고 가정하지만 무툴이나 프로토타입에 해당하는 것들이 있습니다.

바인딩:

• javascript:URL은 항상 피해야 할 공포입니다.
• 인라인 이벤트 핸들러 속성도 훌륭하지는 않지만, 약간의 빠른 개발/테스트를 위해서는 괜찮습니다.
• 스크립트로부터의 바인딩, 마크업을 깨끗하게 유지하는 것은 일반적으로 베스트 프랙티스로 간주됩니다.jQuery는 이것을 권장하지만, 어떤 도서관이나 평범한 JS에서도 할 수 없는 이유는 없습니다.

응답:

• InjQueryreturn false둘 다를 의미합니다.preventDefault그리고.stopPropagation, 즉에 이 있는 가 다릅니다.
• jQuery 는.preventDefault/stopPropagation(IE다 (returnValue/cancelBubble).

단,

• 링크가 아닌 링크가 있습니다.그것은 어디에도 연결되지 않고 행동입니다.<a>이것을 위한 이상적인 마크업은 아닙니다.누군가가 마우스를 가운데 클릭하거나 북마크에 추가하거나 링크에 있는 다른 어포던스를 사용하려고 하면 잘못됩니다.
• 가 합니다를 수 설정합니다.#thatelementsid링크 이름에서 요소 ID를 가져오는 데 방해되지 않는 스크립팅을 사용합니다.당신은 또한 냄새를 맡을 수 있습니다.location.hash해당 요소를 열기 위해 문서 로드 시 링크가 다른 컨텍스트에서 유용해집니다.
• 않으면,, 입니다처럼 <input type="button">아니면<button type="button"> 할 수 원한다면 CSS로 버튼이 아닌 링크처럼 스타일링 할 수 있습니다.
• 하지만 IE와 Firefox에서는 버튼 스타일을 완전히 제거할 수 없는 측면이 있습니다.만,입니다.<span>대신.추가할 수 있습니다.tabindex대부분의 브라우저에서 키보드로 액세스할 수 있도록 하는 속성입니다. 비록 이것은 제대로 표준화되어 있지는 않지만 말입니다.Space(공간) 또는 Enter(입력)과 같은 키 누름을 감지하여 활성화할 수도 있습니다.이것은 다소 불만족스럽지만, 여전히 꽤 인기가 있습니다. (그래서, 한가지 예로, 이것은 이렇게 합니다.
• 다른 <input type="image"> 기능이 버튼만을 것입니다 이것은 완벽한 시각 제어 기능이 있는 버튼의 접근성의 장점을 가지고 있지만 순수한 이미지 버튼만을 위한 것입니다.

할 수 은 를 하는 것입니다.javascript:void(0)가장 오래된 브라우저에서도 지원된다는 것입니다.그렇기는 하지만, 저는 당신이 언급한 다른 눈에 띄지 않는 접근법 중 하나를 사용할 것입니다.

• ,event.preventDefault()그리고.return false서로 바꿔 사용할 수 있습니다.
• event.preventDefault()원하는 대로 페이지를 다시 로드할 수는 없지만 클릭 이벤트가 상위 항목으로 버블업되도록 허용합니다.을 멈추고 싶다면면다와 함께 .event.stopPropagation.
• return false이벤트가 부모에게 거품이 일게 되는 것을 막을 수 있습니다.

위의 첫 번째 포인트에서 '교환 가능하게'라고 말하는 것은 이벤트가 부모에게 거품을 끼치든 말든 상관하지 않는 경우가 많기 때문입니다.하지만 미세 조정이 필요할 때는 2점과 3점을 고려해야 합니다.

다음의 예를 생각해 봅니다.

<div>Here is some text <a href="www.google.com">Click!</a></div>​

$("a").click(function(e) {
    e.preventDefault();
});

$("div").click(function() {
    $(this).css("border", "1px solid red");
});
​

. 으로로 그러나 이벤트는 여전히 '거품'이 되어 디브의 클릭 이벤트에 불이 붙게 되고, 이로 인해 주변에 테두리가 추가됩니다. 추가e.stopPropagation() 아니면 그냥 return false디브의 클릭 이벤트가 발생하지 않습니다.여기서 문제를 해결할 수 있습니다: http://jsfiddle.net/cMKsN/1/

드림위버는 기본적으로 제가 사용하기 시작한 멋진 트릭을 사용합니다.

<a href='javascript:;'></a>

작고, 걸려 넘어지지 않고, 도서관에 구애받지 않습니다.

는 합니다를 더 입니다.return false, 사용자에게 다음과 같은 동작을 계속할지 여부를 선택할 수 있는 옵션을 제공하기 때문에, 여기에 나와 있는 것과 같이, 퀴크 모드에서 다음과 같은 작업을 계속할지 여부를 선택할 수 있습니다.

http://www.quirksmode.org/js/events_early.html#default

단순하고 오래됐지만 자바스크립트 버전에 상관없이 크로스브라우저로 잘 작동합니다.

event.preventDefault()그리고.return false;한 가지입니다. 이벤트에 대한 기본 작업을 처리하지 않도록 브라우저에 지시합니다(이 경우 클릭한 앵커 태그의 href로 이동).href=javascript:그리고 그 일은 또 다른 것입니다. 그들은 기본적인 행동이 '아무것도 하지 않음'을 야기합니다.

스타일의 문제입니다.온클릭에서 모든 작업을 수행하시겠습니까, 아니면 온클릭과 href 모두에 작업을 넣고 브라우저의 기능에 의존하여 둘 중 하나를 변조할 수 있기를 원하십니까?

사용하는것을 좋아합니다.href="javascript:void(0)"으로서 링크에#페이지 상단으로 이동할 수 있음을 의미하며 jQuery 이벤트가 로드되지 않는 경우(예: jQuery가 로드되지 않는 경우) 실제로 발생할 수 있습니다.

저도 사용합니다.event.preventDefault();예:다 예를 들어:

HTML:

<a id="link" href="http://www.google.com">Test</a>

jQuery 예제 1:

$("#link").click(
    function(){
        alert("Hi");
        invalidCode();
        return false;
    }
);

jQuery 예제 2:

$("#link").click(
    function(event){
        event.preventDefault();
        alert("Hi");
        invalidCode();
        return false;
    }
);

부터.invalidCode();다를 .return false도달하지 않으며 jQuery 예제 1을 사용하는 경우 사용자는 Google로 리디렉션되지만 jQuery 예제 2에서는 그렇지 않습니다.

저도 자바스크립트를 본 적이 있다고 생각합니다. 웹이 발전하면서 사용 가능한 트릭을 추적하기가 어렵습니다.그러나 이것은 주로 접근성에 관한 것입니다. (besides javascript: void(0); ) 그리고 약간의 수정은 javascript: void(0)이 아니라 javascript: void(0)입니다. 즉, javascript: return false; 는 확실하지 않지만 마찬가지입니다.

저는 항상 javascript:void(0)을 사용하고 몇 가지 이유로 사용할 것을 제안합니다.물론 나의 겸손한 생각으로는.

1.) 위에 언급한 사람과 같은 이유로 사용합니다.href="#"는 정상으로 가는 것을 나타낼 수 있기 때문에 적절하지 않으며, 이 경우에도 "#top"이 더 적합할 것입니다.그러나 이는 코드에서 #(해시)를 사용하는 다른 것을 트리거할 수 있으므로, 다른 이유는 #를 사용할 수 있는 다른 자바스크립트와의 충돌을 피하기 위함입니다.그리고 예를 들어 플러그인을 사용할 때 이것을 찾고 즉시 교체하는 편입니다.href='#'에서 href='jav스크립트: void(0); 또는 href='jav스크립트:;'

2.) 특정 앵커 태그 그룹에 대한 기능을 재사용하려면 클릭 이벤트 감지 및 기본 동작 방지에 대한 걱정 없이 어떤 속성의 선택기로 호출할 수 있으며 개발 선호도라고 생각하지 않고 수행합니다.

3.) 대부분의 경우 javascript: void(0)을 사용하여 링크 빌드를 하는 경우, 기존 href= rel= nofollow로 따라가지 않는 링크를 만들려고 하므로 작업인 링크를 인덱싱하지 않습니다.크롤러와 로봇이 이제 플래시도 읽을 수 있다고 해서 자바스크립트 링크를 읽을 수 있다고 해서 놀라지 않습니다.

4.) 2.) 에서 href="jav스크립트: void(0);"를 사용한 후 jQuery 기능에서 selector에서 직접 클래스를 타겟팅하여 클릭이벤트 기본동작 방지에 대한 고민을 잊고 클래스를 타겟팅 할 수 있습니다.

        jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]') ... off('click').on('click',function()

            //from the class
            $('a.-the-class') ... off('click').on('click',function()

            //from the id

            $('a#-the-id').off('click').on('click',function()
            {
            --do something with this link
        });

}); 

나는 당신이 항상 할 수 있는 것처럼 수업을 이용하는 것이 더 편합니다.

$(a#-your-id). 클래스(-your-class-)가 있습니다.

또는 다른 흥미로운 조합과 많은 링크에 영향을 미칩니다.그래서 저는 A를 선택자로만 사용하는 것을 제안하지 않을 것입니다.

보통 여기서 제안하는 것은 다음과 같습니다.

  jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]').on('click',function(event)
            //do something
            //prevent the click as is passed to the function as an event
            event.preventDefault();
        });

});

는 자바스크립트를 .href그런 의도가 아니니까요나는 이런 것을 선호합니다.

<a href="#" onclick="return handler();">Link</a>

언급URL : https://stackoverflow.com/questions/3498492/javascriptvoid0-vs-return-false-vs-preventdefault