เมื่อใดและเพราะเหตุใดreturn false
ใน JavaScript?
เมื่อใดและเพราะเหตุใดreturn false
ใน JavaScript?
คำตอบ:
บ่อยครั้งในตัวจัดการเหตุการณ์เช่นการonsubmit
ส่งคืนค่าเท็จเป็นวิธีที่จะบอกให้เหตุการณ์ไม่เกิดขึ้นจริง ดังนั้นในonsubmit
กรณีนี้หมายความว่าจะไม่ส่งแบบฟอร์ม
event.preventDefault()
สำหรับฟังก์ชันนี้ ฉันเชื่อว่าการกลับมาผิดพลาดเลิกใช้แล้วและไม่สามารถใช้งานได้อีกต่อไป
return false
วิธีการนี้มีการเปลี่ยนแปลงอะไรบ้าง
ฉันเดาว่าคุณหมายถึงความจริงที่ว่าคุณมักจะต้องใส่ 'คืนเท็จ' คำสั่งในตัวจัดการเหตุการณ์ของคุณเช่น
<a href="#" onclick="doSomeFunction(); return false;">...
'คืนเท็จ' ในกรณีนี้หยุดเบราว์เซอร์จากการกระโดดไปยังตำแหน่งปัจจุบันตามที่ระบุโดย href = "#" - แต่จะดำเนินการ doSomeFunction () เท่านั้น มีประโยชน์เมื่อคุณต้องการเพิ่มกิจกรรมเพื่อยึดแท็ก แต่ไม่ต้องการให้เบราว์เซอร์กระโดดขึ้นและลงที่จุดยึดแต่ละจุดในการคลิกแต่ละครั้ง
มันถูกใช้เพื่อหยุดการแพร่กระจายของเหตุการณ์ คุณเห็นเมื่อคุณมีสององค์ประกอบทั้งที่มีตัวจัดการเหตุการณ์คลิก (ตัวอย่าง)
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
| |
-----------------------------------
หากคุณคลิกที่องค์ประกอบภายใน (element2) มันจะทริกเกอร์เหตุการณ์คลิกในองค์ประกอบทั้งสอง: 1 และ 2 ซึ่งเรียกว่า "เหตุการณ์เดือดปุด ๆ " หากคุณต้องการจัดการกับเหตุการณ์ใน element2 เท่านั้นตัวจัดการเหตุการณ์จะต้องส่งคืนค่าเท็จเพื่อหยุดการเผยแพร่เหตุการณ์
อีกตัวอย่างหนึ่งคือตัวจัดการการคลิกลิงก์ หากคุณต้องการหยุดการทำงานของลิงค์ลิงค์ คุณสามารถเพิ่มตัวจัดการ onclick และกลับเท็จ เมื่อต้องการหยุดเหตุการณ์จากการแพร่กระจายไปยังตัวจัดการเริ่มต้น
false
จากตัวจัดการเหตุการณ์จะป้องกันการกระทำเริ่มต้นที่เกี่ยวข้องกับเหตุการณ์ คุณสามารถทำได้ผ่านการโทรevent.preventDefault()
หรือตั้งค่าevent.returnValue = false
(IE) เพื่อหยุดเหตุการณ์จาก bubbling คุณจะต้องโทรevent.stopPropagation()
หรือการตั้งค่าevent.cancelBubble = true
(IE)
เอ่อ ... แล้วฟังก์ชั่นบูลีนในการระบุว่า 'ไม่จริง'?
ฉันมาที่หน้านี้หลังจากค้นหา "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) ใช้กลับเท็จ
function() { return false; }
เท่ากับfunction(e) { e.preventDefault(); e.stopPropagation(); }
แต่ใน js บริสุทธิ์ก็ไม่เหมือนกัน function() { return false; }
เท่ากับfunction(e) { e.preventDefault(); }
จริง มันไม่หยุดการแพร่กระจาย
เมื่อใช้each
ฟังก์ชันของ jQuery การส่งคืนความจริงหรือเท็จจะมีความหมาย ดูเอกสาร
ฉันคิดว่าคำถามที่ดีกว่าคือทำไมในกรณีที่คุณประเมินชุดค่าส่งคืนแบบบูลคุณจะไม่ใช้จริง / เท็จ ? ฉันหมายความว่าคุณอาจมีจริง / โมฆะจริง / -1 อื่น ๆ อื่น ๆ Javascript "falsy" ค่าที่ใช้แทน แต่ทำไมคุณถึงทำเช่นนั้น?
เมื่อคุณต้องการทริกเกอร์รหัสจาวาสคริปต์จากแท็กสมอควรใช้ตัวจัดการ onclick แทน javascript: pseudo-protocol รหัสจาวาสคริปต์ที่ทำงานภายในตัวจัดการ onclick จะต้องส่งคืนจริงหรือเท็จ (หรือนิพจน์มากกว่า evalues เป็นจริงหรือเท็จ) กลับไปที่แท็กตัวเอง - ถ้ามันกลับมาจริงจากนั้น HREF ของสมอจะตามมาเหมือนลิงก์ปกติ ถ้ามันกลับเท็จ, HREF จะถูกละเว้น นี่คือเหตุผลที่ "return false" มักจะรวมอยู่ที่ส่วนท้ายของรหัสภายในตัวจัดการ onclick
คุณใช้ return false เพื่อป้องกันบางสิ่งเกิดขึ้น ดังนั้นหากคุณมีสคริปต์ที่ทำงานบนส่งแล้วกลับเท็จจะป้องกันไม่ให้ส่ง
เมื่อคำสั่งส่งคืนถูกเรียกในฟังก์ชั่นการดำเนินการของฟังก์ชั่นนี้จะหยุด หากระบุไว้ค่าที่กำหนดจะถูกส่งกลับไปที่ function caller หากละเว้นนิพจน์แล้วจะไม่ได้นิยามกลับคืนมาแทน
สำหรับข้อมูลเพิ่มเติมดูที่ที่หน้า MDN return
เอกสารสำหรับ
กลับเท็จโดยใช้เฉพาะในกรณีที่คุณมีฟังก์ชั่น wearg (โดยการทดสอบบางอย่าง) หรือคุณต้องการที่จะหยุดฟังก์ชั่นบางอย่างเช่นใช้กลับเท็จในตอนท้าย "onsubmit"
นอกจากนี้ลิงค์สั้นและน่าสนใจนี้เพื่ออ่านผ่าน 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 () เพื่อจัดการสิ่งนี้