“ javascript: void (0)” หมายถึงอะไร?

<a href="javascript:void(0)" id="loginlink">login</a>

ฉันเคยเห็นมาhrefหลายครั้งแล้ว แต่ฉันไม่รู้ว่ามันแปลว่าอะไร

ประกอบการประเมินการแสดงออกที่กำหนดและผลตอบแทนแล้วvoidundefined

voidผู้ประกอบการมักจะถูกใช้เพียงเพื่อให้ได้undefinedค่าดั้งเดิมมักจะใช้คำว่า“ void(0)” (ซึ่งเทียบเท่ากับ“ void 0”) ในกรณีเหล่านี้undefined สามารถใช้ตัวแปรโกลบอลแทน (สมมติว่ามันไม่ได้ถูกกำหนดให้เป็นค่าที่ไม่ใช่ค่าเริ่มต้น)

คำอธิบายที่ให้ไว้ที่นี่: ผู้ประกอบการvoid

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

นอกเหนือจากคำตอบทางเทคนิคjavascript:voidหมายความว่าผู้เขียนกำลังทำผิด

ไม่มีเหตุผลที่ดีที่จะใช้javascript:pseudo-URL (*) ในทางปฏิบัติมันจะทำให้เกิดความสับสนหรือข้อผิดพลาดหากใครก็ตามลองทำเช่น 'ลิงก์คั่นหน้า', 'เปิดลิงก์ในแท็บใหม่' และอื่น ๆ สิ่งนี้เกิดขึ้นได้อย่างมากมายในตอนนี้ผู้คนเคยชินกับการคลิกที่แท็บกลางใหม่: ดูเหมือนว่าลิงก์คุณต้องการอ่านมันในแท็บใหม่ แต่ดูเหมือนจะไม่ใช่ลิงก์จริงเลย และให้ผลลัพธ์ที่ไม่ต้องการเช่นหน้าว่างหรือข้อผิดพลาด JS เมื่อคลิกกลาง

<a href="#">เป็นทางเลือกทั่วไปซึ่งอาจจะไม่ดี อย่างไรก็ตามคุณต้องอย่าลืมreturn falseจากonclickตัวจัดการเหตุการณ์ของคุณเพื่อป้องกันไม่ให้มีการติดตามลิงก์และเลื่อนขึ้นไปด้านบนของหน้า

ในบางกรณีอาจมีสถานที่ที่เป็นประโยชน์จริง ๆ ให้ชี้ไปที่ลิงก์ ตัวอย่างเช่นหากคุณมีการควบคุมคุณสามารถคลิกที่เปิดขึ้นที่ซ่อนไว้ก่อนหน้านี้<div id="foo">มันทำให้รู้สึกบางอย่างที่จะใช้<a href="#foo">เพื่อเชื่อมโยงกับมัน หรือหากมีวิธีที่ไม่ใช่จาวาสคริปต์ในการทำสิ่งเดียวกัน (เช่น 'thispage.php? show = foo' ที่กำหนดให้ foo ปรากฏในตอนแรก) คุณสามารถเชื่อมโยงไปยังสิ่งนั้นได้

มิฉะนั้นหากลิงก์ชี้ไปที่สคริปต์บางตัวเท่านั้นไม่ใช่ลิงก์จริงๆและไม่ควรทำเครื่องหมายเช่นนั้น วิธีการปกติจะเพิ่มonclickไป<span>, <div>หรือ<a>โดยไม่มีการhrefและรูปแบบในทางใดทางหนึ่งที่จะทำให้มันชัดเจนคุณสามารถคลิกที่มัน นี่คือสิ่งที่ StackOverflow [ทำตอนเขียน; ตอนนี้มันใช้href="#"]

ข้อเสียของสิ่งนี้คือคุณสูญเสียการควบคุมแป้นพิมพ์เนื่องจากคุณไม่สามารถแท็บลงในช่วง / div / bare-a หรือเปิดใช้งานด้วยพื้นที่ ไม่ว่าสิ่งนี้จะเป็นข้อเสียจริงหรือไม่ขึ้นอยู่กับประเภทของการกระทำองค์ประกอบที่ตั้งใจจะทำ คุณสามารถใช้ความพยายามในการเลียนแบบการโต้ตอบของแป้นพิมพ์ด้วยการเพิ่มtabIndexองค์ประกอบและฟังปุ่มกด Space แต่มันจะไม่ทำซ้ำพฤติกรรมเบราว์เซอร์จริง 100% ไม่น้อยเพราะเบราว์เซอร์ที่แตกต่างกันสามารถตอบสนองต่อคีย์บอร์ดที่แตกต่างกัน (ไม่พูดถึงเบราว์เซอร์ที่ไม่ใช่ภาพ)

หากคุณต้องการองค์ประกอบที่ไม่ใช่ลิงก์ แต่สามารถเปิดใช้งานได้ตามปกติโดยใช้เมาส์หรือแป้นพิมพ์สิ่งที่คุณต้องการคือ<button type="button">(หรือ<input type="button">ดีสำหรับเนื้อหาที่เป็นข้อความธรรมดา) คุณสามารถใช้ CSS เพื่อพักมันเพื่อให้ดูเหมือนลิงค์มากกว่าปุ่มถ้าคุณต้องการ แต่เนื่องจากมันมีลักษณะเหมือนปุ่มนั่นคือสิ่งที่คุณควรทำเครื่องหมายไว้

(*: ในการเขียนไซต์อย่างไรก็ตามเห็นได้ชัดว่าพวกเขามีประโยชน์สำหรับ bookmarklets javascript:pseudo-URLs เป็นแนวคิดที่แปลกประหลาด: locator ที่ไม่ได้ชี้ไปที่ตำแหน่ง แต่แทนที่จะเรียกรหัสที่ใช้งานภายในตำแหน่งปัจจุบัน ปัญหาสำหรับเบราว์เซอร์และ webapps และไม่ควรคิดค้นโดย Netscape)

มันหมายความว่ามันจะไม่ทำอะไรเลย มันเป็นความพยายามที่จะมีลิงค์ที่ไม่ 'นำทาง' ทุกที่ แต่มันไม่ใช่วิธีที่ถูกต้อง

จริง ๆ แล้วคุณควรอยู่return falseในonclickเหตุการณ์เช่น:

<a href="#" onclick="return false;">hello</a>

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

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

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

พฤติกรรมของ "#" vs javascript: void มีความแตกต่างอย่างมาก

"#" เลื่อนคุณไปด้านบนสุดของหน้าขณะที่ "javascript: void (0);" ไม่.

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

มันเป็นวิธีที่นิยมอย่างมากในการเพิ่มฟังก์ชั่น JavaScript ในลิงค์ HTML
ตัวอย่างเช่น: [Print]ลิงก์ที่คุณเห็นบนหน้าเว็บจำนวนมากเขียนขึ้นในลักษณะนี้:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

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

ทางเลือกที่จะเป็นการใช้งานของhref="javascript:void(0);" href="#"ทางเลือกนี้ไม่ต้องการเปิด JavaScript ในเบราว์เซอร์ของผู้ใช้ดังนั้นจึงเข้ากันได้มากกว่า

คุณควรมี href บนแท็ก การเรียกฟังก์ชั่น JavaScript ที่ส่งกลับ 'undefined' จะทำได้ดี ดังนั้นจะเชื่อมโยงกับ '#'

แท็ก Anchor ใน Internet Explorer 6 ที่ไม่มี href จะไม่a:hoverถูกนำไปใช้

ใช่มันแย่มากและเป็นอาชญากรรมต่อมนุษยชาติ แต่หลังจากนั้นอีกครั้งดังนั้น Internet Explorer 6 โดยทั่วไป

ฉันหวังว่านี่จะช่วยได้.

Internet Explorer 6 เป็นอาชญากรรมสำคัญต่อมนุษยชาติ

เป็นมูลค่าการกล่าวขวัญว่าบางครั้งคุณจะเห็นโมฆะ 0 เมื่อตรวจสอบไม่ได้กำหนดเพียงเพราะมันต้องใช้ตัวอักษรน้อย

ตัวอย่างเช่น:

something === undefined

เมื่อเทียบกับ

something === void 0

วิธีการลดขนาดบางวิธีแทนที่ undefined ด้วย void 0 ด้วยเหตุผลนี้

การใช้javascript:void(0)หมายความว่าผู้เขียน HTML นั้นใช้องค์ประกอบสมอในทางที่ผิดแทนที่องค์ประกอบปุ่ม

แท็ก Anchor มักใช้กับเหตุการณ์ onclick เพื่อสร้างปุ่มหลอกด้วยการตั้งค่า href เป็น "#" หรือ "javascript: void (0)" เพื่อป้องกันไม่ให้หน้าเว็บรีเฟรช ค่าเหล่านี้ทำให้เกิดพฤติกรรมที่ไม่คาดคิดเมื่อคัดลอก / ลากลิงค์เปิดลิงก์ในแท็บ / หน้าต่างใหม่การทำบุ๊กมาร์กและเมื่อ JavaScript ยังคงดาวน์โหลดอยู่ข้อผิดพลาดหรือถูกปิดใช้งาน สิ่งนี้ยังสื่อถึงความหมายที่ไม่ถูกต้องกับเทคโนโลยีช่วยเหลือ (เช่นโปรแกรมอ่านหน้าจอ) ในกรณีเหล่านี้ขอแนะนำให้ใช้<button>แทน โดยทั่วไปคุณควรใช้จุดยึดสำหรับการนำทางโดยใช้ URL ที่ถูกต้อง

ที่มา: MDN ของ<a>หน้า

voidเป็นตัวดำเนินการที่ใช้ในการส่งคืนundefinedค่าดังนั้นเบราว์เซอร์จะไม่สามารถโหลดหน้าใหม่ได้

เว็บเบราว์เซอร์จะพยายามและใช้สิ่งที่ใช้เป็น URL และโหลดเว้นแต่ว่าจะเป็นฟังก์ชัน JavaScript ที่ส่งคืนค่า Null ตัวอย่างเช่นหากเราคลิกลิงก์เช่นนี้:

<a href="javascript: alert('Hello World')">Click Me</a>

ข้อความแจ้งเตือนจะปรากฏขึ้นโดยไม่ต้องโหลดหน้าใหม่และนั่นเป็นเพราะalertเป็นฟังก์ชั่นที่คืนค่าเป็นศูนย์ ซึ่งหมายความว่าเมื่อเบราว์เซอร์พยายามโหลดหน้าใหม่มันจะเห็นค่าว่างและไม่มีอะไรโหลด

สิ่งสำคัญที่ควรทราบเกี่ยวกับตัวดำเนินการ void คือต้องใช้ค่าและไม่สามารถใช้งานได้ด้วยตัวเอง เราควรใช้แบบนี้:

<a href="javascript: void(0)">I am a useless link</a>

เพื่อให้เข้าใจถึงแนวคิดนี้เราควรเข้าใจตัวดำเนินการ void ใน JavaScript ก่อน

ไวยากรณ์สำหรับผู้ประกอบการโมฆะคือ: void «expr»ซึ่งประเมิน expr และส่งกลับไม่ได้กำหนด

หากคุณใช้โมฆะเป็นฟังก์ชั่นมันจะเป็นดังนี้:

function myVoid(expr) {
    return undefined;
}

ตัวดำเนินการที่เป็นโมฆะนี้มีการใช้งานที่สำคัญอย่างหนึ่งนั่นคือ - ทิ้งผลลัพธ์ของนิพจน์

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

javascript:void window.open("http://example.com/")

voidประกอบการประเมินการแสดงออกที่กำหนดและจากนั้นส่งกลับไม่ได้กำหนด มันหลีกเลี่ยงการรีเฟรชหน้า

นักพัฒนาเว็บใช้javascript:void(0)เพราะเป็นวิธีที่ง่ายที่สุดในการป้องกันพฤติกรรมเริ่มต้นของaแท็ก void(*anything*)ผลตอบแทนundefinedและมันเป็นค่าเท็จ และการส่งคืนค่าที่ผิดพลาดนั้นเป็นเหมือนreturn falseในonclickกรณีของaแท็กที่ป้องกันพฤติกรรมเริ่มต้น

ดังนั้นฉันคิดว่าjavascript:void(0)เป็นวิธีที่ง่ายที่สุดในการป้องกันพฤติกรรมเริ่มต้นของaแท็ก

ลิงก์ต้องมีเป้าหมาย HREF ที่จะระบุเพื่อให้สามารถใช้งานได้กับวัตถุแสดงผลที่ใช้งานได้

เบราว์เซอร์ส่วนใหญ่จะไม่แยกวิเคราะห์ JavaScript ขั้นสูงใน

<A HREF="" 

แท็กเช่น:

<A href="JavaScript:var elem = document.getElementById('foo');" 

เนื่องจากแท็ก HREF ในเบราว์เซอร์ส่วนใหญ่ไม่อนุญาตให้มีช่องว่างหรือจะแปลงช่องว่างเป็น% 20 HEX ที่เทียบเท่ากับ SPACE ซึ่งทำให้ JavaScript ของคุณไร้ประโยชน์อย่างแท้จริงกับล่าม

ดังนั้นหากคุณต้องการใช้แท็ก A HREF เพื่อดำเนินการ JavaScript แบบอินไลน์คุณต้องระบุค่าที่ถูกต้องสำหรับ HREF FIRST ที่ไม่ซับซ้อนเกินไป (ไม่มีช่องว่าง) จากนั้นระบุ JavaScript ในแท็กแอตทริบิวต์เหตุการณ์เช่น OnClick , OnMouseOver, OnMouseOut ฯลฯ

คำตอบทั่วไปคือทำสิ่งนี้:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

มันใช้งานได้ดี แต่มันทำให้หน้าข้ามไปด้านบนเนื่องจากเครื่องหมายปอนด์ / แท็กแฮชบอกให้ทำเช่นนั้น

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

<A NAME='middleofpage'></A>

จากนั้นคุณสามารถเปลี่ยนแท็ก A HREF ของคุณเพื่อข้ามไปที่ 'middleofpage' และเรียกใช้ JavaScript ในเหตุการณ์ OnClick เมื่อเกิดเหตุการณ์เช่นนี้:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

จะมีหลายครั้งที่คุณไม่ต้องการให้ลิงก์กระโดดไปรอบ ๆ ดังนั้นคุณสามารถทำสองสิ่ง:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

ตอนนี้มันจะไม่ปรากฏที่ไหนเมื่อคลิก แต่อาจทำให้หน้าเว็บจัดตำแหน่งตัวเองใหม่จากวิวพอร์ตปัจจุบัน อันนี้ไม่สวย วิธีที่ดีที่สุดในการจัดเตรียมจาวาสคริปต์ในบรรทัดโดยใช้ A HREF คืออะไร แต่ไม่ต้องดำเนินการใด ๆ ข้างต้น javascript: void (0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

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

สิ่งต่อไปที่เกิดขึ้นคือ OnClick ถูกเรียกใช้งาน หน้าเว็บไม่ขยับไม่มีอะไรเกิดขึ้น

JavaScript: URL กัน นี่คือที่เป็นโมฆะจะมีประโยชน์ในการเขียนรหัสที่สั้นกว่า

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}