จะป้องกันการคลิกลิงก์ '#' ไม่ให้ข้ามไปยังด้านบนของหน้าได้อย่างไร

ขณะนี้ฉันกำลังใช้<a>แท็กกับ jQuery เพื่อเริ่มต้นสิ่งต่างๆเช่นกิจกรรมการคลิกเป็นต้น

ตัวอย่างคือ <a href="#" class="someclass">Text</a>

แต่ฉันเกลียดที่ '#' ทำให้หน้าข้ามไปด้านบนของหน้า ฉันควรทำอะไรแทน

ใน jQuery เมื่อคุณจัดการกับเหตุการณ์คลิก กลับเท็จเพื่อหยุดการเชื่อมโยงจากการตอบสนองตามปกติป้องกันการกระทำเริ่มต้นซึ่งจะเข้าเยี่ยมชมhrefคุณลักษณะจากที่เกิดขึ้น (ต่อความคิดเห็นของ PoweRoy และคำตอบของ Erik ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

ดังนั้นนี่เก่า แต่ ... ในกรณีที่มีคนค้นหาสิ่งนี้ในการค้นหา

เพียงใช้"#/"แทน"#"และหน้าจะไม่กระโดด

คุณสามารถเขียนได้เช่นนี้

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

ฉันไม่แน่ใจว่ามันเป็นวิธีที่ดีกว่า แต่มันเป็นวิธี :)

โซลูชัน # 1: (ธรรมดา)

<a href="#!" class="someclass">Text</a>

โซลูชัน # 2: (จำเป็นjavascript)

<a href="javascript:void(0);" class="someclass">Text</a>

โซลูชัน # 3: (จำเป็นjQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

คุณสามารถใช้event.preventDefault()เพื่อหลีกเลี่ยงปัญหานี้ อ่านเพิ่มเติมได้ที่นี่: http://api.jquery.com/event.preventDefault/

เพียงใช้<input type="button" />แทน<a>และใช้ CSS เพื่อจัดให้มีลักษณะเหมือนลิงก์หากคุณต้องการ

ปุ่มต่างๆถูกสร้างขึ้นมาเพื่อการคลิกโดยเฉพาะและพวกเขาไม่ต้องการแอตทริบิวต์ href ใด ๆ

วิธีที่ดีที่สุดคือการใช้การกระทำแบบ onload เพื่อสร้างปุ่มและต่อท้ายที่คุณต้องการผ่านทางจาวาสคริปต์ดังนั้นเมื่อปิดการใช้งานจาวาสคริปต์พวกเขาจะไม่แสดงเลยและไม่สับสนผู้ใช้

เมื่อคุณใช้href="#"คุณจะได้รับลิงค์ต่าง ๆ มากมายที่ชี้ไปยังตำแหน่งเดียวกันซึ่งจะไม่ทำงานเมื่อเอเจนต์ไม่สนับสนุน JavaScript

หากคุณต้องการใช้สมอคุณสามารถใช้http://api.jquery.com/event.preventDefault/เหมือนคำตอบอื่น ๆ ที่แนะนำ

นอกจากนี้คุณยังสามารถใช้องค์ประกอบอื่น ๆ เช่นการขยายและแนบเหตุการณ์คลิกไปที่

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

คุณสามารถใช้#0เป็น href ได้เนื่องจาก0ไม่ได้รับอนุญาตให้เป็น id หน้าจะไม่กระโดด

<a href="#0" class="someclass">Text</a>

$('a[href="#"]').click(function(e) {e.preventDefault(); });

เพียงแค่ใช้

<a href="javascript:;" class="someclass">Text</a>

jQuery

$('.someclass').click(function(e) { alert("action here"); }

หากองค์ประกอบไม่มีค่า href ที่มีความหมายแสดงว่าไม่ใช่ลิงก์จริงๆดังนั้นทำไมไม่ใช้องค์ประกอบอื่นแทน

ตามการแนะนำของ Neothor การเว้นช่วงมีความเหมาะสมและถ้าจัดรูปแบบอย่างถูกต้องจะเห็นได้อย่างชัดเจนว่าเป็นรายการที่สามารถคลิกได้ คุณสามารถแนบเหตุการณ์โฮเวอร์เพื่อทำให้ elemnt 'สว่างขึ้น' ขณะที่เมาส์ของผู้ใช้เลื่อนไปมา

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

ลิงก์ที่มี href = "#" ควรถูกแทนที่ด้วยองค์ประกอบปุ่มเกือบทุกครั้ง:

<button class="someclass">Text</button>

การใช้ลิงค์กับ href = "#" เป็นปัญหาการเข้าถึงเนื่องจากลิงก์เหล่านี้จะปรากฏแก่ผู้อ่านหน้าจอซึ่งจะอ่าน "Link - Text" แต่ถ้าผู้ใช้คลิกมันจะไม่ไปไหนเลย

คุณสามารถผ่านจุดยึดแท็กโดยไม่มีคุณสมบัติ href และใช้ jQuery เพื่อทำการกระทำที่ต้องการ:

<a class="foo">bar</a>

ฉันเคยใช้:

<a href="javascript://nop/" class="someClass">Text</a>

#/เคล็ดลับการทำงาน แต่จะเพิ่มเหตุการณ์ประวัติศาสตร์เบราว์เซอร์ ดังนั้นการคลิกย้อนกลับจะไม่ทำงานอย่างที่ผู้ใช้อาจต้องการ / คาดหวัง

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); เป็นวิธีที่ฉันไปเพราะมันใช้งานได้กับเนื้อหาที่มีอยู่แล้วและองค์ประกอบใด ๆ ที่เพิ่มไปยัง DOM หลังจากโหลด

โดยเฉพาะฉันต้องทำสิ่งนี้ในรายการแบบหล่นลง bootstrap ภายในของ.btn-group(อ้างอิง)ดังนั้นฉันได้:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

วิธีนี้เป็นเป้าหมายและไม่ส่งผลกระทบต่อสิ่งอื่นใดบนหน้าเว็บ

ฉันเคยใช้:

<a href="#?">Some text</a>

เมื่อพยายามป้องกันการข้ามหน้า ไม่แน่ใจว่านี่เป็นสิ่งที่ดีที่สุด แต่ดูเหมือนว่าจะทำงานได้ดีมาหลายปี

มี 4 วิธีที่คล้ายกันในการป้องกันไม่ให้หน้าไปด้านบนโดยไม่ใช้ JavaScript:

ตัวเลือกที่ 1:

<a href="#0">Link</a>

ตัวเลือก 2:

<a href="#!">Link</a>

ตัวเลือก 3:

<a href="#/">Link</a>

ตัวเลือก 4 ( ไม่แนะนำ ):

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

แต่จะเป็นการดีกว่าevent.preventDefault()ถ้าใช้หากคุณส่งกิจกรรมคลิกใน jQuery

คุณสามารถคืนค่าเท็จหลังจากประมวลผล jQuery ของคุณ

เช่น.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

ฉันใช้สิ่งนี้:

<a href="#null" class="someclass">Text</a>

เพื่อป้องกันไม่ให้หน้ากระโดดคุณต้องโทรe.stopPropagation();หลังจากโทรe.preventDefault();:

stopPropagationป้องกันเหตุการณ์จากการขึ้นต้นทรี DOM ข้อมูลเพิ่มเติมที่นี่: https://api.jquery.com/event.stoppropagation/

หากคุณต้องการโยกย้ายไปยังส่วน Anchor ในหน้าเดียวกันโดยไม่ต้องใช้การกระโดดหน้า:

เพียงใช้ "# /" แทน "#" เช่น

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

การเพิ่มบางสิ่งหลังจาก#กำหนดโฟกัสของหน้าไปยังองค์ประกอบด้วยรหัสนั้น ทางออกที่ง่ายที่สุดคือการใช้#/แม้ว่าคุณจะใช้ jQuery อย่างไรก็ตามหากคุณจัดการกับเหตุการณ์ใน jQuery event.preventDefault()เป็นวิธีที่จะไป

<a href="#!">Link</a>และ<a href="#/">Link</a>ไม่ทำงานถ้าหนึ่งที่มีการคลิกที่ป้อนข้อมูลเดียวกันมากกว่าหนึ่งครั้ง .. มันใช้เวลาเพียง 1 ในเหตุการณ์คลิกสำหรับแต่ละในหลายปัจจัย

ยังคงเป็นวิธีที่ดีที่สุดที่จะไปอยู่กับ <a href="#">Link</a>

แล้ว

event.preventDefault();