ฉันควรใช้ค่า“ href” ใดสำหรับลิงก์ JavaScript“ #” หรือ“ javascript: void (0)”

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

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

หรือ

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

javascript:void(0)ฉันใช้

สามเหตุผล การส่งเสริมการใช้งาน#ในหมู่ทีมนักพัฒนาย่อมนำไปสู่การใช้ค่าตอบแทนของฟังก์ชันที่เรียกว่าดังนี้:

function doSomething() {
    //Some code
    return false;
}

แต่แล้วพวกเขาก็ลืมที่จะใช้ในการใช้งานreturn doSomething() onclick และเพียงแค่doSomething()

เหตุผลที่สองสำหรับการหลีกเลี่ยง#คือสุดท้ายreturn false;จะไม่ดำเนินการหากฟังก์ชันที่เรียกใช้เกิดข้อผิดพลาด ดังนั้นนักพัฒนาจะต้องจำไว้ว่าให้จัดการข้อผิดพลาดใด ๆ อย่างเหมาะสมในฟังก์ชั่นที่เรียกว่า

เหตุผลที่สามคือมีหลายกรณีที่onclickคุณสมบัติเหตุการณ์ถูกกำหนดแบบไดนามิก ฉันชอบที่จะสามารถเรียกฟังก์ชั่นหรือกำหนดแบบไดนามิกโดยไม่ต้องรหัสฟังก์ชั่นโดยเฉพาะสำหรับวิธีการหนึ่งในการแนบหรืออื่น ๆ ดังนั้นของฉันonclick(หรืออะไรก็ได้) ในมาร์กอัป HTML มีลักษณะดังนี้:

onclick="someFunc.call(this)"

หรือ

onclick="someFunc.apply(this, arguments)"

การใช้javascript:void(0)หลีกเลี่ยงอาการปวดหัวข้างต้นทั้งหมดและฉันไม่พบตัวอย่างข้อเสียใด ๆ

ดังนั้นหากคุณเป็นนักพัฒนาคนเดียวคุณสามารถตัดสินใจได้อย่างชัดเจน แต่ถ้าคุณทำงานเป็นทีมคุณต้องระบุว่า:

ใช้href="#"ตรวจสอบให้แน่ใจonclickเสมอมีreturn false;ในตอนท้ายว่าฟังก์ชั่นที่เรียกว่าไม่โยนความผิดพลาดและหากคุณแนบฟังก์ชั่นแบบไดนามิกที่จะทำให้แน่ใจว่าสถานที่ให้บริการเช่นเดียวกับไม่ได้โยนความผิดพลาดก็จะส่งกลับonclickfalse

หรือ

ใช้ href="javascript:void(0)"

การสื่อสารที่สองง่ายกว่ามาก

ทั้ง

หากคุณสามารถมี URL จริงที่เหมาะสมใช้ HREF ปุ่มคลิกบนจะไม่ทำงานหากมีคนคลิกกลางที่ลิงก์ของคุณเพื่อเปิดแท็บใหม่หรือปิดการใช้งาน JavaScript

หากเป็นไปไม่ได้คุณควรฉีดสมอแท็กลงในเอกสารด้วย JavaScript และตัวจัดการเหตุการณ์คลิกที่เหมาะสม

ฉันรู้ว่าสิ่งนี้ไม่ได้เป็นไปได้เสมอไป แต่ในความคิดของฉันฉันควรจะพยายามพัฒนาเว็บไซต์สาธารณะใด ๆ

ตรวจสอบJavaScript ที่ไม่เป็นการรบกวนและการเพิ่มประสิทธิภาพแบบก้าวหน้า (ทั้ง Wikipedia)

การทำ<a href="#" onclick="myJsFunc();">Link</a>หรือ<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>สิ่งอื่นใดที่มีonclickคุณลักษณะ - ก็ไม่เป็นไรเมื่อห้าปีก่อน แต่ตอนนี้มันอาจเป็นการปฏิบัติที่ไม่ดี นี่คือเหตุผล:

1. มันส่งเสริมการปฏิบัติจาวาสคริปต์ที่ไม่พึงประสงค์ซึ่งกลายเป็นเรื่องยากที่จะรักษาและยากที่จะขยาย เพิ่มเติมเกี่ยวกับเรื่องนี้ในการสร้างความรำคาญ JavaScript

2. คุณใช้เวลาในการเขียนรหัส verbose มากเกินไปซึ่งมีประโยชน์น้อยมาก (ถ้ามี) ใน codebase ของคุณ

3. ขณะนี้มีวิธีที่ดีกว่าง่ายขึ้นและสามารถบำรุงรักษาและปรับขนาดได้มากขึ้นเพื่อให้ได้ผลลัพธ์ตามที่ต้องการ

วิธี JavaScript ที่ไม่เป็นการรบกวน

ไม่มีhrefคุณสมบัติเลย! การรีเซ็ต CSS ที่ดีจะดูแลลักษณะเคอร์เซอร์เริ่มต้นที่หายไปดังนั้นจึงไม่ใช่ปัญหา จากนั้นแนบฟังก์ชั่น JavaScript ของคุณโดยใช้วิธีปฏิบัติที่ดีที่สุดที่สง่างามและไม่เป็นการรบกวน - ซึ่งรักษาได้ดีกว่าเนื่องจากจาวาสคริปต์ของคุณยังคงอยู่ในจาวาสคริปต์แทนที่จะเป็นมาร์กอัปของคุณ - ซึ่งเป็นสิ่งสำคัญเมื่อคุณเริ่มพัฒนา ส่วนประกอบและแม่แบบ blackboxed เพิ่มเติมเกี่ยวกับสิ่งนี้ในสถาปัตยกรรมแอปพลิเคชัน JavaScript ขนาดใหญ่

ตัวอย่างโค้ดแบบง่าย

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

blackboxed Backbone.jsตัวอย่างเช่น

สำหรับการปรับขนาด blackboxed ตัวอย่างองค์ประกอบ Backbone.js - เห็นนี้ตัวอย่างเช่น jsfiddle ทำงานที่นี่ สังเกตเห็นว่าเราใช้จาวาสคริปต์ที่ไม่สร้างความรำคาญและในรหัสจำนวนเล็กน้อยมีองค์ประกอบที่สามารถทำซ้ำได้ทั่วหน้าหลาย ๆ ครั้งโดยไม่มีผลข้างเคียงหรือความขัดแย้งระหว่างอินสแตนซ์ขององค์ประกอบที่แตกต่างกัน ! ที่น่าตื่นตาตื่นใจ

หมายเหตุ

• การไม่ใช้แอhrefททริบิวในaองค์ประกอบจะทำให้องค์ประกอบนั้นไม่สามารถเข้าถึงได้โดยใช้tabปุ่มนำทาง หากคุณต้องการให้องค์ประกอบเหล่านั้นสามารถเข้าถึงได้ผ่านทางtabปุ่มคุณสามารถตั้งค่าtabindexแอตทริบิวต์หรือใช้buttonองค์ประกอบแทน คุณสามารถองค์ประกอบปุ่มรูปแบบได้อย่างง่ายดายให้มีลักษณะเหมือนการเชื่อมโยงปกติตามที่กล่าวไว้ในคำตอบของ Tracker1

• การไม่ใส่hrefแอตทริบิวต์ในaองค์ประกอบจะทำให้Internet Explorer 6และInternet Explorer 7ไม่ใช้a:hoverสไตล์ซึ่งเป็นสาเหตุที่เราได้เพิ่ม JavaScript shim แบบธรรมดาเพื่อให้บรรลุสิ่งนี้ผ่านทางa.hoverแทน สิ่งใดที่ใช้ได้อย่างสมบูรณ์แบบหากคุณไม่มีแอตทริบิวต์ href และไม่มีการลดทอนอย่างงดงามลิงก์ของคุณจะไม่ทำงานอีกต่อไปและคุณจะมีปัญหาที่ใหญ่กว่าที่คุณต้องกังวล

• หากคุณต้องการให้การกระทำของคุณยังคงใช้งานได้กับ JavaScript ถูกปิดใช้งานดังนั้นให้ใช้aองค์ประกอบที่มีhrefแอตทริบิวต์ที่ไปยัง URL ที่จะดำเนินการด้วยตนเองแทนการร้องขอ Ajax หรืออะไรก็ตามที่ควรจะเป็น หากคุณกำลังทำสิ่งนี้อยู่คุณต้องการให้แน่ใจว่าคุณทำการevent.preventDefault()โทรคลิกเพื่อให้แน่ใจว่าเมื่อคลิกปุ่มแล้วมันจะไม่ไปตามลิงค์ ตัวเลือกนี้เรียกว่าการย่อยสลายที่สง่างาม

'#'void(0)จะนำกลับมาใช้ไปด้านบนของหน้าดังนั้นฉันมักจะไปด้วย

javascript:; นอกจากนี้ยังมีพฤติกรรมเช่น javascript:void(0);

ฉันจะไม่แนะนำอย่างซื่อสัตย์ ฉันจะใช้สไตล์เก๋<button></button>สำหรับพฤติกรรมนั้น

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

วิธีนี้คุณสามารถกำหนด onclick ของคุณ ฉันยังแนะนำการผูกผ่านสคริปต์ไม่ใช้onclickคุณลักษณะในแท็กองค์ประกอบ gotcha เพียงอย่างเดียวคือเอฟเฟกต์ข้อความ psuedo 3d ใน IEs รุ่นเก่าที่ไม่สามารถปิดใช้งานได้

หากคุณต้องใช้องค์ประกอบ A ให้ใช้javascript:void(0);ด้วยเหตุผลที่กล่าวถึงไปแล้ว

• จะดักในกรณีที่เหตุการณ์ onclick ของคุณล้มเหลว
• จะไม่มีการเรียกโหลดที่ผิดพลาดเกิดขึ้นหรือทริกเกอร์เหตุการณ์อื่นตามการเปลี่ยนแปลงแฮช
• แท็กแฮชอาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดหากการคลิกผ่านไปมา (onclick พ่น) หลีกเลี่ยงแท็กดังกล่าวเว้นแต่จะเป็นลักษณะการเลื่อนผ่านที่เหมาะสมและคุณต้องการเปลี่ยนประวัติการนำทาง

หมายเหตุ: คุณสามารถแทนที่0ด้วยสตริงเช่นjavascript:void('Delete record 123')ซึ่งสามารถใช้เป็นตัวบ่งชี้พิเศษที่จะแสดงสิ่งที่คลิกจะทำจริง

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

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

หากคุณใช้ Angular2 วิธีนี้จะได้ผล:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

ดูที่นี่https://stackoverflow.com/a/45465728/2803344

ถ้าคุณถามฉัน

หาก "ลิงก์" ของคุณมีวัตถุประสงค์เพียงประการเดียวในการเรียกใช้รหัส JavaScript บางอย่างก็ไม่ถือว่าเป็นการเชื่อมโยง ค่อนข้างชิ้นส่วนของข้อความที่มีฟังก์ชั่น JavaScript ควบคู่ไปกับมัน ฉันอยากจะแนะนำให้ใช้<span>แท็กที่onclick handlerแนบมากับมันและ CSS พื้นฐานบางอย่างเพื่อส่งลิงค์ ลิงค์ถูกสร้างขึ้นเพื่อการนำทางและหากรหัส JavaScript ของคุณไม่ได้มีไว้สำหรับการนำทางลิงก์นั้นไม่ควรเป็น<a>แท็ก

ตัวอย่าง:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

เป็นการดีที่คุณจะทำ:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

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

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

ฉันใช้ดังต่อไปนี้

<a href="javascript:;" onclick="myJsFunc();">Link</a>

แทน

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

ฉันเห็นด้วยกับข้อเสนอแนะอื่น ๆ ที่ระบุว่าคุณควรใช้ URL ปกติในhrefแอตทริบิวต์จากนั้นเรียกใช้ฟังก์ชัน JavaScript ใน onclick ข้อบกพร่องคือพวกเขาเพิ่มโดยอัตโนมัติreturn falseหลังจากการโทร

ปัญหาของวิธีนี้คือถ้าฟังก์ชั่นใช้งานไม่ได้หรือหากมีปัญหาใด ๆ ลิงก์ก็จะไม่สามารถคลิกได้ เหตุการณ์ Onclick จะส่งคืนเสมอfalseดังนั้น URL ปกติจะไม่ถูกเรียก

มีวิธีแก้ปัญหาที่ง่ายมาก ให้ฟังก์ชั่นกลับมาtrueทำงานได้อย่างถูกต้อง จากนั้นใช้ค่าที่ส่งคืนเพื่อพิจารณาว่าควรยกเลิกการคลิกหรือไม่:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

โปรดทราบว่าฉันปฏิเสธผลลัพธ์ของdoSomething()ฟังก์ชัน ถ้ามันใช้งานได้มันจะกลับมาtrueดังนั้นมันจะถูกลบล้าง ( false) และpath/to/some/URLจะไม่ถูกเรียก หากฟังก์ชั่นจะกลับมาfalse(ตัวอย่างเช่นเบราว์เซอร์ไม่สนับสนุนสิ่งที่ใช้ภายในฟังก์ชั่นหรือมีอะไรผิดพลาด) มันจะถูกทำให้ไร้ผลtrueและpath/to/some/URLถูกเรียกใช้

# ดีกว่า javascript:anythingแต่ต่อไปนี้จะดีกว่า:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

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

ฉันแนะนำให้ใช้<button>องค์ประกอบแทนโดยเฉพาะหากการควบคุมนั้นควรทำให้เกิดการเปลี่ยนแปลงของข้อมูล (บางอย่างเช่น POST)

จะดียิ่งขึ้นถ้าคุณฉีดองค์ประกอบอย่างสงบเสงี่ยมซึ่งเป็นประเภทของการเพิ่มประสิทธิภาพแบบก้าวหน้า (ดูความคิดเห็นนี้)

ถ้าคุณไม่เขียนลิงก์โดยใช้ JavaScript (เพื่อให้คุณรู้ว่ามันเปิดใช้งานในเบราว์เซอร์) คุณควรจะให้ลิงค์ที่ถูกต้องสำหรับผู้ที่กำลังใช้งาน JavaScript และปิดใช้งานการกระทำเริ่มต้นของลิงค์ใน onclick ของคุณ จัดการเหตุการณ์. วิธีนี้ผู้ที่เปิดใช้งาน JavaScript จะเรียกใช้ฟังก์ชันและผู้ที่ปิดใช้งาน JavaScript จะข้ามไปยังหน้าที่เหมาะสม (หรือตำแหน่งภายในหน้าเดียวกัน) แทนที่จะคลิกที่ลิงค์และไม่มีอะไรเกิดขึ้น

แฮชแน่นอน ( #) ดีกว่าเพราะใน JavaScript มันเป็น pseudoscheme:

1. ประวัติมลพิษ
2. สร้างสำเนาใหม่ของเครื่องยนต์
3. ทำงานในขอบเขตทั่วโลกและไม่เคารพระบบเหตุการณ์

แน่นอน "#" ด้วยตัวจัดการ onclick ซึ่งป้องกันการกระทำเริ่มต้นดีกว่า [มาก] ยิ่งกว่านั้นลิงก์ที่มีจุดประสงค์เดียวในการเรียกใช้ JavaScript ไม่ใช่ "ลิงก์" เว้นแต่คุณจะส่งผู้ใช้ไปยังจุดยึดที่เหมาะสมบนหน้า (เพียง # จะส่งไปด้านบน) เมื่อมีสิ่งผิดปกติ คุณสามารถจำลองหน้าตาของลิงค์กับสไตล์ชีทและลืม href ได้เลย

นอกจากนี้เกี่ยวกับข้อเสนอแนะของ cowgod โดยเฉพาะอย่างยิ่งสิ่ง...href="javascript_required.html" onclick="...นี้เป็นวิธีการที่ดี แต่ก็ไม่ได้แยกความแตกต่างระหว่างสถานการณ์ "ปิดการใช้งาน JavaScript" และ "onclick ล้มเหลว" สถานการณ์

ฉันมักจะไปเพื่อ

<a href="javascript:;" onclick="yourFunction()">Link description</a>

มันสั้นกว่า javascript: void (0) และทำเช่นเดียวกัน

ฉันจะใช้:

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

เหตุผล:

1. สิ่งนี้ทำให้ hrefเครื่องมือค้นหาง่าย ๆ ที่ต้องการ หากคุณใช้สิ่งอื่น (เช่นสตริง) อาจทำให้ a404 not foundข้อผิดพลาด
2. เมื่อเมาส์อยู่เหนือลิงก์มันจะไม่แสดงว่ามันเป็นสคริปต์
3. เมื่อใช้return false;งานหน้าจะไม่ข้ามไปที่ด้านบนหรือbackปุ่มแตก

ฉันเลือกใช้javascript:void(0)เพราะการใช้สิ่งนี้สามารถป้องกันไม่ให้คลิกขวาเพื่อเปิดเมนูเนื้อหา แต่javascript:;สั้นกว่าและทำสิ่งเดียวกัน

ดังนั้นเมื่อคุณทำสิ่ง JavaScript ด้วย<a />แท็กและถ้าคุณใส่href="#"เช่นกันคุณสามารถเพิ่มคืนเท็จในตอนท้ายของเหตุการณ์(ในกรณีที่มีการผูกเหตุการณ์แบบอินไลน์)เช่น:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

หรือคุณสามารถเปลี่ยนแอตทริบิวต์hrefด้วย JavaScript เช่น:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

หรือ

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

แต่ความหมายทั้งหมดวิธีการดังกล่าวข้างต้นเพื่อให้บรรลุนี้จะไม่ถูกต้อง(มันทำงานได้ดีแม้ว่า) หากองค์ประกอบใดไม่ได้ถูกสร้างขึ้นเพื่อสำรวจหน้าและมีสิ่ง JavaScript ที่เกี่ยวข้องกับมันก็ไม่ควรจะเป็น<a>แท็ก

คุณสามารถใช้<button />แทนการทำสิ่งต่าง ๆ หรือองค์ประกอบอื่น ๆ เช่น b, span หรืออะไรก็ตามที่ตรงตามความต้องการของคุณเพราะคุณได้รับอนุญาตให้เพิ่มเหตุการณ์ในองค์ประกอบทั้งหมด

ดังนั้นมีผลประโยชน์อย่างใดอย่างหนึ่ง<a href="#">กับการใช้งาน a href="#"คุณจะได้รับตัวชี้เคอร์เซอร์โดยค่าเริ่มต้นในองค์ประกอบที่ว่าเมื่อคุณทำ ฉันคิดว่าคุณสามารถใช้ CSS สำหรับสิ่งนี้ได้cursor:pointer;ซึ่งแก้ปัญหานี้ได้เช่นกัน

และในตอนท้ายถ้าคุณผูกพันเหตุการณ์จากโค้ด JavaScript เองคุณสามารถทำได้event.preventDefault()เพื่อให้บรรลุสิ่งนี้หากคุณใช้<a>แท็ก แต่ถ้าคุณไม่ได้ใช้<a>แท็กสำหรับสิ่งนี้คุณจะได้รับประโยชน์ ไม่จำเป็นต้องทำสิ่งนี้

ดังนั้นหากคุณเห็นจะเป็นการดีกว่าที่จะไม่ใช้แท็กสำหรับเนื้อหาประเภทนี้

อย่าใช้ลิงก์เพื่อจุดประสงค์เดียวในการใช้งาน JavaScript

การใช้ href = "#" เลื่อนหน้าไปด้านบน การใช้โมฆะ (0) สร้างปัญหาการนำทางภายในเบราว์เซอร์

ให้ใช้องค์ประกอบอื่นที่ไม่ใช่ลิงค์แทน:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

และตกแต่งด้วย CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

มันจะดีกว่าถ้าใช้ jQuery

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

และละเว้นทั้งสองhref="#"และhref="javascript:void(0)"และ

มาร์กเกอร์แท็กจุดยึดจะเป็นเช่นนั้น

<a onclick="hello()">Hello</a>

ง่ายพอ!

หากคุณกำลังใช้AngularJSคุณสามารถใช้สิ่งต่อไปนี้:

<a href="">Do some fancy JavaScript</a>

ซึ่งจะไม่ทำอะไรเลย

นอกจากนี้

• จะไม่นำคุณไปด้านบนของหน้าเช่นเดียวกับ (#)
  • ดังนั้นคุณไม่จำเป็นต้องกลับมาfalseพร้อมกับ JavaScript อย่างชัดเจน
• มันสั้นกระชับ

หากไม่มี hrefอาจไม่มีเหตุผลที่จะใช้แท็กจุดยึด

คุณสามารถแนบกิจกรรม (คลิกโฮเวอร์และอื่น ๆ ) ในองค์ประกอบเกือบทุกรายการดังนั้นทำไมไม่ใช้เพียง spanหรือ adiv ?

และสำหรับผู้ใช้ที่ปิดการใช้งาน JavaScript: หากไม่มีทางเลือกอื่น (ตัวอย่างเช่นทางเลือกhref) พวกเขาอย่างน้อยก็ไม่ควรเห็นและโต้ตอบกับองค์ประกอบนั้นได้ไม่ว่ามันจะ<a>เป็น<span>แท็กหรืออะไรก็ตาม

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

ตัวอย่าง ... สมมติว่าคุณมีลิงค์การค้นหาต่อไปนี้:

<a href="search.php" id="searchLink">Search</a>

คุณสามารถทำสิ่งต่อไปนี้ได้เสมอ:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

ด้วยวิธีนี้ผู้ที่ปิดใช้งาน JavaScript จะถูกนำไปsearch.phpยังในขณะที่ผู้ชมของคุณที่มี JavaScript ดูการทำงานที่ได้รับการปรับปรุงของคุณ

ฉันใช้พวกเขาเป็นการส่วนตัวร่วมกัน ตัวอย่างเช่น:

HTML

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

ด้วย jQuery นิดหน่อย

$('a[href="#"]').attr('href','javascript:void(0);');

หรือ

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

แต่ฉันใช้มันเพื่อป้องกันไม่ให้หน้าข้ามไปด้านบนเมื่อผู้ใช้คลิกที่จุดยึดที่ว่างเปล่า ฉันไม่ค่อยได้ใช้ onClick และอื่น ๆonกิจกรรมโดยตรงใน HTML

ข้อเสนอแนะของฉันคือการใช้<span>องค์ประกอบที่มีclassคุณลักษณะแทนการยึด ตัวอย่างเช่น:

<span class="link">Link</span>

จากนั้นกำหนดฟังก์ชั่นให้.linkกับสคริปต์ที่อยู่ในเนื้อหาและก่อนหน้า</body>แท็กหรือในเอกสาร JavaScript ภายนอก

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* หมายเหตุ:สำหรับองค์ประกอบที่สร้างขึ้นแบบไดนามิกให้ใช้:

$('.link').on('click', function() {
    // do something
});

และสำหรับองค์ประกอบที่สร้างขึ้นแบบไดนามิกซึ่งสร้างขึ้นด้วยองค์ประกอบที่สร้างขึ้นแบบไดนามิกให้ใช้:

$(document).on('click','.link', function() {
    // do something
});

จากนั้นคุณสามารถจัดสไตล์อิลิเมนต์การขยายให้ดูเหมือนสมอกับ CSS เล็กน้อย:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

นี่คือตัวอย่างjsFiddleของข้างต้น

ขึ้นอยู่กับสิ่งที่คุณต้องการทำให้สำเร็จคุณสามารถลืม onclick และใช้ href:

<a href="javascript:myJsFunc()">Link Text</a>

มันจำเป็นที่จะต้องกลับเท็จ ฉันไม่ชอบ#ตัวเลือกเพราะดังที่กล่าวไว้มันจะพาผู้ใช้ไปที่ด้านบนของหน้า หากคุณมีที่อื่นที่จะส่งผู้ใช้หากพวกเขาไม่ได้เปิดใช้งาน JavaScript (ซึ่งหายากที่ฉันทำงาน แต่เป็นความคิดที่ดีมาก) แล้ววิธีการที่เสนอของสตีฟใช้งานได้ดี

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

สุดท้ายคุณสามารถใช้javascript:void(0)หากคุณไม่ต้องการให้ใครไปไหนและถ้าคุณไม่ต้องการเรียกใช้ฟังก์ชัน JavaScript มันใช้งานได้ดีถ้าคุณมีภาพที่คุณต้องการให้เหตุการณ์การวางเมาส์เกิดขึ้น แต่ไม่มีอะไรให้ผู้ใช้คลิก

เมื่อฉันมีลิงค์มารยาทหลายลิงก์ฉันต้องการให้คลาส 'no-link' แก่พวกเขา

จากนั้นใน jQuery ฉันเพิ่มรหัสต่อไปนี้:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

และสำหรับ HTML ลิงก์นั้นเรียบง่าย

<a href="/" class="no-link">Faux-Link</a>

ฉันไม่ชอบใช้ Hash-Tags เว้นแต่ว่าจะใช้เป็นจุดยึดและฉันจะทำเฉพาะเมื่อฉันมีลิงค์ faux มากกว่าสองลิงก์มิฉะนั้นฉันจะใช้ javascript: void (0)

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

โดยทั่วไปแล้วฉันต้องการหลีกเลี่ยงการใช้ลิงก์เลยและปิดบางสิ่งบางอย่างในช่วงเวลาหนึ่งและใช้เพื่อเป็นวิธีการใช้งานโค้ด JavaScript บางอย่างเช่นป๊อปอัปหรือการเปิดเผยเนื้อหา

ฉันเชื่อว่าคุณกำลังแสดงขั้วคู่ผิด นี่ไม่ใช่แค่สองตัวเลือกเท่านั้น

ฉันเห็นด้วยกับนาย D4V360 ผู้แนะนำว่าแม้ว่าคุณจะใช้แท็กจุดยึดคุณไม่ได้ยึดที่นี่อย่างแท้จริง สิ่งที่คุณมีคือส่วนพิเศษของเอกสารที่ควรทำงานแตกต่างกันเล็กน้อย <span>แท็กอยู่ไกลที่เหมาะสมมากขึ้น

ฉันลองทั้ง Google Chrome ด้วยเครื่องมือสำหรับนักพัฒนาและid="#"ใช้เวลา 0.32 วินาที ในขณะที่javascript:void(0)วิธีการใช้เวลาเพียง 0.18 วินาที ดังนั้นใน google chrome javascript:void(0)ทำงานได้ดีขึ้นและเร็วขึ้น

ฉันพื้นถอดความจากบทความปฏิบัตินี้โดยใช้การเพิ่มประสิทธิภาพของความก้าวหน้า คำตอบสั้น ๆ ก็คือคุณไม่เคยใช้javascript:void(0);หรือ#เว้นแต่ว่าอินเทอร์เฟซผู้ใช้ของคุณได้อนุมานว่ามีการเปิดใช้งาน JavaScript ซึ่งในกรณีนี้คุณควรใช้javascript:void(0);ซึ่งในกรณีนี้คุณควรใช้ นอกจากนี้อย่าใช้ span เป็นลิงก์เนื่องจากเป็นความหมายที่ผิดพลาดตั้งแต่เริ่มต้น

ใช้SEOเส้นทาง URL ที่เป็นมิตรกับในแอปพลิเคชันของคุณเช่น / Home / Action / Parameters ก็เป็นแนวปฏิบัติที่ดีเช่นกัน หากคุณมีลิงก์ไปยังหน้าเว็บที่ทำงานได้โดยไม่มี JavaScript ก่อนคุณสามารถปรับปรุงประสบการณ์ได้ในภายหลัง ใช้ลิงก์จริงไปยังหน้าทำงานจากนั้นเพิ่มเหตุการณ์ onlick เพื่อปรับปรุงการนำเสนอ

นี่คือตัวอย่าง Home / ChangePicture เป็นลิงค์ที่ใช้งานได้กับแบบฟอร์มบนหน้าเว็บที่สมบูรณ์พร้อมกับส่วนติดต่อผู้ใช้และปุ่มส่ง HTML มาตรฐาน แต่ดูเหมือนว่าจะดีกว่าเมื่อถูกเขียนลงในกล่องโต้ตอบโมดอลด้วยปุ่ม jQueryUI ใช้ได้ทั้งสองวิธีขึ้นอยู่กับเบราว์เซอร์ซึ่งเป็นไปตามการพัฒนามือถือครั้งแรก

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>