PreventDefault () บนแท็ก <a>

133

ฉันมี HTML และ jQuery ที่เลื่อนdivขึ้นและลงเพื่อแสดงหรือซ่อนเมื่อมีการคลิกลิงก์:

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

— Musaddiq Khan
แหล่งที่มา

อัญมณีเล็ก ๆ ที่ดีสำหรับแองเคอร์ - ขอบคุณ! ใครช่วยอธิบายว่าทำไมถึงได้ผล

— justinpage

8

hrefแอตทริบิวต์@KLVTZ ของแท็กจุดยึด ( a) ต้องไม่ว่างเปล่า ... แต่เราสามารถตั้งค่าjavascript:<code-here>เป็นถูกกฎหมาย / ถูกต้อง จากนั้นเราป้อน<code-here>เพียงคำสั่งว่างโดยการเพิ่มอัฒภาค วิธีนี้ลิงก์ไม่ทำอะไรเลย

— Stijn de Witt

1

ขอบคุณมาก! สิ่งนี้ทำให้ฉันสามารถใช้ฟังก์ชันปุ่มย้อนกลับ (จดจำสถานะที่ตั้งโดย pushState () ข้ามหน้า) ลงใน breadcrumbs ของ CalePHP เช่นนี้ $ this-> Html-> addCrumb ('Sessions', 'javascript: window.history.back (); ');

— Patronaut

38

ขอแนะนำว่าอย่าใช้return falseเนื่องจาก 3 สิ่งเกิดขึ้น:

event.preventDefault ();
event.stopPropagation ();
หยุดการเรียกกลับและส่งกลับทันทีเมื่อถูกเรียก

ดังนั้นในสถานการณ์ประเภทนี้คุณควรใช้เท่านั้น event.preventDefault();

ที่เก็บบทความ - jQuery Events: หยุด (Mis) โดยใช้ Return False

— ไรอัน
แหล่งที่มา

13

หรือคุณสามารถส่งคืนเท็จจากเหตุการณ์การคลิก:

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

ซึ่งจะหยุดการทำงานของ A-Href

อย่างไรก็ตามโปรดทราบว่าด้วยเหตุผลด้านการใช้งานในโลกแห่งอุดมคติที่ href ควรไปที่ไหนสักแห่งสำหรับผู้ที่ต้องการเปิดลิงก์ในแท็บใหม่)

— เคนท์เฟรดริก
แหล่งที่มา

1

ใช่ฉันคิดว่าฉันกำลังตอบสิ่งที่ฉันคิดว่าเจตนาของคุณคือแทนที่จะเป็นคำถาม :)

— Kent Fredric

สำหรับสิ่งที่คุ้มค่าเมื่อหลายปีก่อนได้รับการขนานนามว่าคุณควรกลับ -1 เพื่อป้องกันไม่ให้ href ถูกทริกเกอร์ ฉันไม่คิดว่ามันใช้งานได้กับเบราว์เซอร์ใด ๆ อีกต่อไปและคุณต้อง "คืนค่าเท็จ" เพื่อป้องกันไม่ให้หน้ากระโดด

— Randy

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>

— Jefrey Bulla
แหล่งที่มา

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>

ใช้

javascript: void (0);

— HATCHA
แหล่งที่มา

@AhmadSharif ฉันได้ทดสอบกับ FF 40.0.3 และ IE 11 แล้ววันนี้ยังมีงานอยู่

— HATCHA

1

ฉันคิดว่าโมฆะ (0) อาจน่าเกลียด / ทำให้ผู้ใช้สับสนซึ่งจะเห็นได้เมื่อวางเมาส์เหนือลิงก์ คุณสามารถใส่ JS ที่ถูกต้องได้ดังนั้นฉันจึงต้องการใส่ความคิดเห็นที่อธิบายถึงสิ่งที่มันทำ เช่นhref="javascript:// Send Email"

— colllin

11

แต่วิธีการทำเช่นนี้ใน Javascript ใช้อื่นinline onclick, IIFE, eventและpreventDefault():

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

— A-Sharabiani
แหล่งที่มา

สวัสดีหรือเพียงแค่<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" ในแท็ก Anchor ออก

<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 จะป้องกันพฤติกรรมเริ่มต้นและหยุดเหตุการณ์ที่เดือด

— sebarmeli
แหล่งที่มา

4

คุณสามารถใช้ประโยชน์return false;จากการเรียกเหตุการณ์เพื่อหยุดการเผยแพร่เหตุการณ์ซึ่งจะทำหน้าที่เหมือนเป็นการevent.preventDefault();ปฏิเสธ หรือคุณสามารถใช้javascript:void(0)ในแอตทริบิวต์ href เพื่อประเมินนิพจน์ที่กำหนดจากนั้นกลับundefinedไปที่องค์ประกอบ

การส่งคืนเหตุการณ์เมื่อถูกเรียก:

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

กรณีที่เป็นโมฆะ:

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

คุณสามารถดูข้อมูลเพิ่มเติมได้ใน: ผลของการเพิ่ม void (0) สำหรับ href และ 'return false' ในฟังก์ชันคลิกของ anchor tag มีผลอย่างไร

— RPichioli
แหล่งที่มา