[javascript] <a> 태그의 preventDefault ()

Program / 글쓴이

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 ()는 함수가 아닙니다.

답변

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

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

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

답변

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>

답변

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

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

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

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

답변

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

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

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

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

답변

이것은 방금 테스트 한 비 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>

답변

<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);

답변

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

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