เมื่อใดและเพราะเหตุใด 'ส่งคืนเท็จ' ใน JavaScript


คำตอบ:


88

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


10
นี่เป็นสิ่งที่ดีโดยเฉพาะถ้าคุณต้องการแบบฟอร์ม AJAX ที่ส่งโดยไม่ต้องโหลดหน้าซ้ำ - แต่ก็สามารถใช้งานได้โดยการส่งและโหลดซ้ำหน้าเว็บเมื่อไม่สามารถใช้งานจาวาสคริปต์ได้
Dean Rather

10
Return false เป็น overkill จริง ๆ เพื่อป้องกันการกระทำเริ่มต้นเมื่อสร้างตัวจัดการเหตุการณ์และสามารถนำไปสู่รหัสที่เปราะบาง คำอธิบายและตัวอย่างที่โพสต์ของ Douglas Neiner ที่นี่fuelyourcoding.com/jquery-events-stop-misusing-return-false
Marquis Wang

3
ด้วย jQuery ดีกว่าที่จะใช้event.preventDefault()สำหรับฟังก์ชันนี้ ฉันเชื่อว่าการกลับมาผิดพลาดเลิกใช้แล้วและไม่สามารถใช้งานได้อีกต่อไป
onetwopunch

1
บางครั้งreturn falseวิธีการนี้มีการเปลี่ยนแปลงอะไรบ้าง
Francisco Corrales Morales

@onetopunch อันที่จริงเมื่อฉันเปลี่ยนเป็น e.preventDefault () แก้ปัญหาด้วยหนึ่งในฟังก์ชั่นของฉันตามเหตุการณ์การสัมผัสเนมสเปซ ไม่รู้ทำไม แต่คุณให้ความคิดกับฉัน ขอบคุณ
Garavani

69

ฉันเดาว่าคุณหมายถึงความจริงที่ว่าคุณมักจะต้องใส่ 'คืนเท็จ' คำสั่งในตัวจัดการเหตุการณ์ของคุณเช่น

<a href="#" onclick="doSomeFunction(); return false;">...

'คืนเท็จ' ในกรณีนี้หยุดเบราว์เซอร์จากการกระโดดไปยังตำแหน่งปัจจุบันตามที่ระบุโดย href = "#" - แต่จะดำเนินการ doSomeFunction () เท่านั้น มีประโยชน์เมื่อคุณต้องการเพิ่มกิจกรรมเพื่อยึดแท็ก แต่ไม่ต้องการให้เบราว์เซอร์กระโดดขึ้นและลงที่จุดยึดแต่ละจุดในการคลิกแต่ละครั้ง


3
แน่นอน 'href = "#"' นั้นเป็นแนวปฏิบัติที่ไม่ดี แต่ประเด็นโดยรวมของคุณยังคงอยู่ :-)
Bobby Jack

4
@ vol7ron: ทางเลือกคือ URL จริงที่ทำหน้าที่เป็นทางเลือกสำหรับผู้ที่ไม่มี javascript มิฉะนั้นพวกเขาจะคลิกลิงก์ที่ไม่มีอะไรเกิดขึ้น
บ๊อบบี้แจ็ค

3
@ vol7ron: แน่นอนว่านักพัฒนาซอฟต์แวร์แต่ละคน (หรือเจ้าของไซต์) นั้นจะต้องพิจารณาจำนวนฐานผู้ใช้ที่พวกเขาต้องการที่จะรองรับ ในกรณีเช่นนี้อย่างไรก็ตามที่ตัวเลือกที่กำหนดเป้าหมายผู้คนจำนวนมากนั้นเรียบง่ายฉันไม่เห็นเหตุผลที่คุณไม่เลือกใช้ นอกจากนี้โปรดทราบว่าไม่ใช่เพียงแค่คนที่ปิดใช้งานจาวาสคริปต์อย่างชัดเจน อาจเป็นได้: คนอื่นกำหนดให้พวกเขาตัดสินใจ, ปัญหาเครือข่ายที่ดาวน์โหลดไฟล์ JS, ข้อผิดพลาดในหนึ่งบรรทัดของ JS ทำให้ทั้งหมดล้มเหลว นอกจากนี้มันค่อนข้างดีถ้าคลิกขวา -> เปิดในแท็บใหม่ยังคงใช้งานได้
บ๊อบบี้แจ็ค

มีผู้ใช้ไม่น้อยกว่า 1% หลายคนใช้ส่วนขยายเช่น NoScript ด้วยเหตุผล หากต้องการปิดการใช้งานจาวาสคริปต์
Sepero

@ vol7ron สถานการณ์อื่นที่ควรพิจารณาคือเมื่อ "javascript break" (เนื่องจากข้อผิดพลาดทางไวยากรณ์สูงขึ้นในหน้า) การมีทางเลือกที่ไม่ใช่ js จะช่วยให้คุณมีตาข่ายนิรภัยสำหรับสถานการณ์นี้ (Google.com ลดลงเกือบ 30 นาทีในขณะที่กลับมาเนื่องจากข้อผิดพลาดทางไวยากรณ์ js!)
Alex Czarto

28

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

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

หากคุณคลิกที่องค์ประกอบภายใน (element2) มันจะทริกเกอร์เหตุการณ์คลิกในองค์ประกอบทั้งสอง: 1 และ 2 ซึ่งเรียกว่า "เหตุการณ์เดือดปุด ๆ " หากคุณต้องการจัดการกับเหตุการณ์ใน element2 เท่านั้นตัวจัดการเหตุการณ์จะต้องส่งคืนค่าเท็จเพื่อหยุดการเผยแพร่เหตุการณ์

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


9
ส่วนแรกของคำตอบนี้ผิด: การส่งคืนfalseจากตัวจัดการเหตุการณ์จะป้องกันการกระทำเริ่มต้นที่เกี่ยวข้องกับเหตุการณ์ คุณสามารถทำได้ผ่านการโทรevent.preventDefault()หรือตั้งค่าevent.returnValue = false(IE) เพื่อหยุดเหตุการณ์จาก bubbling คุณจะต้องโทรevent.stopPropagation()หรือการตั้งค่าevent.cancelBubble = true(IE)
คริสโต

18

เอ่อ ... แล้วฟังก์ชั่นบูลีนในการระบุว่า 'ไม่จริง'?


4
FileNotFound เกี่ยวกับอะไร
nickf

แม้ใน FileNotFound false ยังไม่เป็นความจริงใช่ไหม?
Gleb

2
Gleb: ไม่มี "ใน FileNotFound" มันเป็นเรื่องตลก TDWTF: thedailywtf.com/Articles/What_Is_Truth_0x3f_.aspx
Chris Jester-Young

12

ฉันมาที่หน้านี้หลังจากค้นหา "js เมื่อใดควรใช้ 'return false;' ในบรรดาผลการค้นหาอื่น ๆ คือหน้าเว็บที่ฉันพบว่ามีประโยชน์และตรงไปตรงมามากขึ้นในเว็บไซต์ CSS-Tricks ของ Chris Coyier: ความแตกต่างระหว่าง 'return false;' และ 'e.preventDefault ();'

ส่วนสำคัญของบทความของเขาคือ:

ฟังก์ชั่น () {กลับเท็จ; }

// เท่ากับ

function (e) {e.preventDefault (); e.stopPropagation (); }

แม้ว่าฉันจะยังคงแนะนำให้อ่านบทความทั้งหมด

Update:หลังจากโต้เถียงข้อดีของการใช้ return return แทน e.preventDefault (); & e.stopPropagation (); หนึ่งในเพื่อนร่วมงานของฉันชี้ให้เห็นว่าผลตอบแทนที่เป็นเท็จยังหยุดการดำเนินการเรียกกลับดังที่ระบุไว้ในบทความนี้: jQuery กิจกรรม: หยุด (MIS) ใช้กลับเท็จ


ฉันต้องแจ้งให้ทราบที่นี่หลังจากที่บางการทดสอบโค้ดที่: ในjQuery , function() { return false; }เท่ากับfunction(e) { e.preventDefault(); e.stopPropagation(); }แต่ใน js บริสุทธิ์ก็ไม่เหมือนกัน function() { return false; }เท่ากับfunction(e) { e.preventDefault(); }จริง มันไม่หยุดการแพร่กระจาย
SkuraZZ


3

ฉันคิดว่าคำถามที่ดีกว่าคือทำไมในกรณีที่คุณประเมินชุดค่าส่งคืนแบบบูลคุณจะไม่ใช้จริง / เท็จ ? ฉันหมายความว่าคุณอาจมีจริง / โมฆะจริง / -1 อื่น ๆ อื่น ๆ Javascript "falsy" ค่าที่ใช้แทน แต่ทำไมคุณถึงทำเช่นนั้น?


1

เมื่อคุณต้องการทริกเกอร์รหัสจาวาสคริปต์จากแท็กสมอควรใช้ตัวจัดการ onclick แทน javascript: pseudo-protocol รหัสจาวาสคริปต์ที่ทำงานภายในตัวจัดการ onclick จะต้องส่งคืนจริงหรือเท็จ (หรือนิพจน์มากกว่า evalues ​​เป็นจริงหรือเท็จ) กลับไปที่แท็กตัวเอง - ถ้ามันกลับมาจริงจากนั้น HREF ของสมอจะตามมาเหมือนลิงก์ปกติ ถ้ามันกลับเท็จ, HREF จะถูกละเว้น นี่คือเหตุผลที่ "return false" มักจะรวมอยู่ที่ส่วนท้ายของรหัสภายในตัวจัดการ onclick


1

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


1

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

สำหรับข้อมูลเพิ่มเติมดูที่ที่หน้า MDN returnเอกสารสำหรับ


1

กลับเท็จโดยใช้เฉพาะในกรณีที่คุณมีฟังก์ชั่น wearg (โดยการทดสอบบางอย่าง) หรือคุณต้องการที่จะหยุดฟังก์ชั่นบางอย่างเช่นใช้กลับเท็จในตอนท้าย "onsubmit"


1

นอกจากนี้ลิงค์สั้นและน่าสนใจนี้เพื่ออ่านผ่าน https://www.w3schools.com/jsref/event_preventdefault.asp

ความหมายและการใช้งาน

เมธอด PreventDefault () จะยกเลิกกิจกรรมหากยกเลิกได้ซึ่งหมายความว่าการกระทำเริ่มต้นที่เป็นของเหตุการณ์จะไม่เกิดขึ้น

ตัวอย่างเช่นสิ่งนี้มีประโยชน์เมื่อ:

Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

หมายเหตุ: เหตุการณ์บางอย่างไม่สามารถยกเลิกได้ ใช้คุณสมบัติที่ยกเลิกได้เพื่อตรวจสอบว่ามีกิจกรรมที่ยกเลิกได้หรือไม่

หมายเหตุ: เมธอด PreventDefault () ไม่ได้ป้องกันการเผยแพร่เหตุการณ์ผ่าน DOM ใช้เมธอด stopPropagation () เพื่อจัดการสิ่งนี้


พิจารณาใช้: developer.mozilla.org/en-US/docs/Web/API/Event/preventDefaultเมื่อเทียบกับ w3schools แต่คำตอบที่มั่นคง
Bibberty
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.