<a> 태그의 preventDefault ()

133

div링크를 클릭 할 때 위아래로 슬라이드하여 HTML 을 표시하거나 숨기는 HTML 및 jQuery가 있습니다 .

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

내 질문은 : preventDefault()링크 역할을하고 URL 끝에 "#"을 추가하고 페이지 상단으로 점프하는 링크를 중지하는 데 어떻게 사용 합니까?

올바른 구문을 알 수 없으며 오류 메시지가 계속 나타납니다.

preventDefault ()는 함수가 아닙니다.

javascript jquery

— 크리스 제 앨런
소스

194

다음과 같은 것을 시도하십시오 :

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

다음은 jQuery 설명서 의 페이지입니다.

— 다비데 과라 노
소스

53

href속성을 다음과 같이 설정하십시오href="javascript:;"

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>

— 무사 디크 칸
소스

앵커를위한 멋진 작은 보석-감사합니다! 왜 이것이 작동하는지 설명 할 수 있습니까?

— justinpage

8

href앵커 태그 ( a) 의 @KLVTZ 속성이 비어 있지 않을 수 있습니다. 그러나로 설정 가능합니다 javascript:<code-here>. 즉, 유효한 / 유효합니다. 그런 다음 <code-here>세미콜론을 추가하여 빈 문장으로 들어갑니다 . 이런 식으로 링크는 아무것도하지 않습니다.

— Stijn de Witt

1

고마워요! 이를 통해 $ this-> Html-> addCrumb ( 'Sessions', 'javascript : window.history.back (); ');

— Patronaut

38

return false3 가지 결과가 발생하므로을 사용하지 않는 것이 좋습니다 .

event.preventDefault ();
event.stopPropagation ();
콜백 실행을 중지하고 호출되면 즉시 반환합니다.

따라서 이런 상황에서는 실제로 만 사용해야합니다 event.preventDefault();

기사 보관 -jQuery 이벤트 : Return False를 사용하여 Stop (Mis)

— 라이언
소스

13

또는 click 이벤트에서 false를 반환 할 수도 있습니다.

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

A-Href가 트리거되는 것을 막을 수 있습니다.

그러나 사용상의 이유로 인해 새로운 세상에서 링크를 열려고하는 사람들에게는 href가 여전히 어딘가에 가야하는 이상적인 세계에서;)

— 켄트 프레드릭
소스

1

그래, 난 내가 의도하는 대신 : 질문의 무슨 생각을 대답이라고 생각

— 켄트 프레드릭

몇 년 전에 그 가치에 대해 href가 트리거되지 않도록 -1을 반환해야한다고 선전되었습니다. 나는 그것이 더 이상 모든 브라우저에서 작동한다고 생각하지 않으며 페이지 점프를 막기 위해 "거짓을 돌려줘야"합니다.

— 랜디

12

이것은 방금 테스트 한 비 JQuery 솔루션이며 작동합니다.

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>

— 제프리 불라
소스

12

<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

사용하다

자바 스크립트 : void (0);

— 해치
소스

@ AhmadSharif 오늘 FF 40.0.3 및 IE 11에서 테스트했지만 여전히 작동합니다.

— HATCHA

1

void (0)은 사용자가 링크를 가리킬 때 볼 수있는 추악하고 혼란 스러울 수 있다고 생각합니다. 실제로 유효한 JS를 넣을 수 있으므로 JS의 기능을 설명하는 주석을 추가하고 싶습니다. 예href="javascript:// Send Email"

— colllin

11

그러나 사용하여 자바 스크립트에서이 일을하는 또 다른 방법 inline onclick, IIFE, event과 preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

— 샤 라비 아니
소스

안녕, 또는 단순히<a href='#' onclick="event.preventDefault()">Click Me</a>

— ankabot

6

여러 작업 후 페이지가 마지막으로 연결되어야 할 때 다음을 수행 할 수 있습니다.

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });

— 1nstinct
소스

1

왜 그런 preventDefault다음 기본 작업을 직접 수행합니까? 추가해야 할 작업을 수행하고 기본값을 그대로 두십시오.

— nathanvda

5

왜 그냥 CSS로하지 않습니까?

앵커 태그에서 'href'속성을 가져옵니다.

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

당신의 CSS에서

  a{
    cursor: pointer;
    }

1

이 방법은 나쁜 브라우저 (예 : 가족)에서 : hover 속성을 잃게됩니다.

— Strae

4

이벤트 전파를 중단해도 문제가되지 않으면

return false;

핸들러 끝에서. jQuery에서는 기본 동작을 방지하고 이벤트 버블 링을 중지합니다.

— 세바 멜리
소스

4

당신은 사용 할 수 있습니다 return false;그것은 같은 역할을, 이벤트 전파를 중지하는 이벤트 통화에서을 event.preventDefault();무효화 그것. 또는 javascript:void(0)href 속성을 사용 하여 주어진 표현식을 평가 한 다음undefined 요소 수 있습니다.

호출 될 때 이벤트를 반환합니다.

<a href="" onclick="return false;"> ... </a>

무효 사례 :

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

: 당신은 더 약 볼 수 있습니다 무효 (0) 앵커 태그의 클릭 이벤트 리스너에 HREF와 '반환 거짓'에 대한 추가의 효과는 무엇입니까?

— RPichioli
소스