ผลของการเพิ่ม 'return false' ให้กับฟังเหตุการณ์คลิกคืออะไร

หลายครั้งที่ฉันเห็นลิงก์เช่นนี้ในหน้า HTML:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

ผลของสิ่งที่return falseอยู่ในนั้น?

นอกจากนี้ฉันมักจะไม่เห็นปุ่ม

สิ่งนี้ระบุไว้ที่ไหนหรือไม่? ในสเป็คบางอย่างใน w3.org?

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

ฉันไม่เชื่อว่ามีข้อกำหนดของ W3C สำหรับสิ่งนี้ อินเตอร์เฟส JavaScript โบราณทั้งหมดเช่นนี้ได้รับฉายา "DOM 0" และส่วนใหญ่ไม่ได้ระบุ คุณอาจโชคดีที่อ่านเอกสารเก่าของ Netscape 2

วิธีที่ทันสมัยของการบรรลุผลนี้คือการโทรevent.preventDefault()และนี่คือที่ระบุไว้ในสเปค DOM 2 เหตุการณ์

คุณสามารถเห็นความแตกต่างด้วยตัวอย่างต่อไปนี้:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

การคลิก "ตกลง" จะส่งคืนจริงและมีการติดตามลิงก์ การคลิก "ยกเลิก" จะส่งคืนค่าเท็จและไม่ได้ติดตามลิงก์ หากปิดการใช้งานจาวาสคริปต์ลิงค์จะถูกติดตามตามปกติ

ต่อไปนี้เป็นขั้นตอนที่มีประสิทธิภาพมากขึ้นในการยกเลิกพฤติกรรมเริ่มต้นและเหตุการณ์เดือดปุด ๆ ในเบราว์เซอร์ทั้งหมด:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

ตัวอย่างของวิธีการนี้จะใช้ในตัวจัดการเหตุการณ์:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

อะไร"กลับเท็จ"เป็นจริงทำ?

return false เป็นการทำสามสิ่งที่แยกจากกันมากเมื่อคุณเรียกมันว่า:

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

ดูjquery-events-stop-misusing-return-falseสำหรับข้อมูลเพิ่มเติม

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

ในขณะที่คลิกที่ลิงค์นี้กลับเท็จจะยกเลิกการทำงานเริ่มต้นของเบราว์เซอร์

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

การดึงข้อมูลเท็จจากเหตุการณ์ JavaScript มักจะยกเลิกพฤติกรรม "เริ่มต้น" - ในกรณีของลิงก์ลิงก์จะบอกเบราว์เซอร์ว่าจะไม่ติดตามลิงก์

ฉันเชื่อว่ามันทำให้เหตุการณ์มาตรฐานไม่เกิดขึ้น

ในตัวอย่างของคุณเบราว์เซอร์จะไม่พยายามไปที่ #

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

หากไม่ได้ระบุ return false ไว้ภาพทั้งคู่จะเปิดป็อปอัพและเปิดภาพตามปกติ บางคนแทนที่จะใช้คืนเท็จใช้จาวาสคริปต์เป็นคุณลักษณะ href แต่หมายความว่าเมื่อปิดการใช้งานจาวาสคริปต์ลิงค์จะไม่ทำอะไรเลย

การใช้ return false ในเหตุการณ์ onclick หยุดเบราว์เซอร์ไม่ให้ประมวลผลสแต็กการประมวลผลที่เหลือซึ่งรวมถึงการติดตามลิงก์ในแอ็ตทริบิวต์ href

กล่าวอีกนัยหนึ่งการเพิ่ม return return จะหยุดการทำงานของ href ในตัวอย่างของคุณนี่คือสิ่งที่คุณต้องการ

ในปุ่มมันไม่จำเป็นเพราะ onclick คือทั้งหมดที่มันจะเคยดำเนินการ - ไม่มี href ในการประมวลผลและไปที่

ผลตอบแทนที่เท็จคือการบอกว่าจะไม่ดำเนินการเริ่มต้นซึ่งในกรณีของการที่<a href>จะไปตามลิงค์ เมื่อคุณกลับเท็จเป็น onclick href จะถูกละเว้น

เบราว์เซอร์แฮ็ค: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

กลับเท็จจะป้องกันการนำทาง มิฉะนั้นตำแหน่งจะกลายเป็นค่าตอบแทนของ someFunc

การreturn falseป้องกันไม่ให้เพจถูกเลื่อนและเลื่อนหน้าต่างที่ไม่ต้องการไปด้านบนหรือด้านล่าง

onclick="return false"

ฉันกำลังประหลาดใจที่ไม่มีใครกล่าวถึงแทนonmousedown onclick

onclick='return false'

ไม่ได้จับพฤติกรรมเริ่มต้นของเบราว์เซอร์ทำให้เกิดการเลือกข้อความ (บางครั้งไม่พึงประสงค์) เกิดขึ้นmousedownแต่

onmousedown='return false'

ทำ.

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

ดูเพิ่มเติมที่event.preventDefault () เทียบกับ return false

ฉันมีลิงค์นี้ในหน้า HTML ของฉัน:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

ฟังก์ชัน setBodyHtml () ถูกกำหนดเป็น:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

เมื่อฉันคลิกลิงก์ลิงก์จะหายไปและข้อความที่แสดงในเบราว์เซอร์จะเปลี่ยนเป็น "เนื้อหาใหม่"

แต่ถ้าฉันลบ "false" ออกจากลิงค์ของฉันการคลิกที่ลิงก์จะไม่ทำอะไรเลย ทำไมถึงเป็นอย่างนั้น?

เป็นเพราะถ้าฉันไม่คืนค่าเท็จพฤติกรรมเริ่มต้นของการคลิกลิงค์และแสดงหน้าเป้าหมายที่เกิดขึ้นจะไม่ถูกยกเลิก แต่นี่คือ href ของไฮเปอร์ลิงก์คือ "" ดังนั้นลิงก์จะกลับไปยังหน้าปัจจุบันของ SAME ดังนั้นหน้าจะรีเฟรชอย่างมีประสิทธิภาพและดูเหมือนไม่มีอะไรเกิดขึ้น

ในพื้นหลังฟังก์ชั่น setBodyHtml () ยังคงได้รับการดำเนินการ มันกำหนดอาร์กิวเมนต์ของมันให้กับ body.innerHTML แต่เนื่องจากมีการรีเฟรชหน้า / โหลดเนื้อหาเนื้อหาที่แก้ไขใหม่ทันทีไม่สามารถมองเห็นได้นานกว่าสองสามมิลลิวินาทีดังนั้นฉันจะไม่เห็น

ตัวอย่างนี้แสดงว่าทำไมบางครั้ง USEFUL ถึงใช้ "return false"

ฉันต้องการกำหนด Sref href ให้กับลิงก์เพื่อให้แสดงเป็นลิงก์เป็นข้อความที่ขีดเส้นใต้ แต่ฉันไม่ต้องการให้คลิกที่ลิงค์เพื่อโหลดหน้าเว็บอีกครั้งอย่างมีประสิทธิภาพ ฉันต้องการให้ยกเลิกการนำทางเริ่มต้น = พฤติกรรมและผลข้างเคียงใด ๆ ที่เกิดจากการเรียกใช้ฟังก์ชั่นของฉัน ดังนั้นฉันจะต้อง "กลับเท็จ"

ตัวอย่างข้างต้นเป็นสิ่งที่คุณจะลองใช้ในระหว่างการพัฒนาอย่างรวดเร็ว สำหรับการผลิตคุณมีแนวโน้มที่จะกำหนดตัวจัดการการคลิกใน JavaScript และโทร PreventDefault () แทน แต่สำหรับการลองใช้อย่างรวดเร็วคำสั่ง "return false" ด้านบนจะทำการหลอกลวง

เมื่อใช้แบบฟอร์ม， เราสามารถใช้ 'คืนเท็จ' เพื่อป้องกันการส่ง

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>