event.preventDefault () กับ return false

เมื่อฉันต้องการป้องกันตัวจัดการเหตุการณ์อื่นไม่ให้ดำเนินการหลังจากเหตุการณ์บางอย่างเกิดขึ้นฉันสามารถใช้หนึ่งในสองเทคนิค ฉันจะใช้ jQuery ในตัวอย่าง แต่สิ่งนี้ใช้ได้กับ plain-JS ด้วย:

1 event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2 return false

$('a').click(function () {
    // custom handling here
    return false;
});

มีความแตกต่างอย่างมีนัยสำคัญระหว่างสองวิธีในการหยุดการเผยแพร่เหตุการณ์หรือไม่?

สำหรับฉันนั้นreturn false;ง่ายกว่าสั้นกว่าและอาจเกิดข้อผิดพลาดน้อยกว่าการใช้วิธีการ ด้วยวิธีการนี้คุณต้องจำไว้เกี่ยวกับการใส่ปลอกวงเล็บที่ถูกต้องและอื่น ๆ

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

return falseจากภายในตัวจัดการเหตุการณ์ jQueryเหมือนกับการเรียกทั้งสอง e.preventDefaultและe.stopPropagationบนวัตถุ jQuery.Event ที่ส่งผ่าน

e.preventDefault()จะป้องกันไม่ให้เหตุการณ์เริ่มต้นเกิดขึ้นe.stopPropagation()จะป้องกันเหตุการณ์จากการเดือดปุด ๆ และreturn falseจะทำทั้งสองอย่าง หมายเหตุว่าพฤติกรรมนี้แตกต่างจากปกติ (ไม่ใช่ jQuery) รถยกเหตุการณ์ที่ยอดเยี่ยมreturn falseไม่ได้หยุดเหตุการณ์จากเดือดปุด ๆ ขึ้น

ที่มา: John Resig

ประโยชน์ใด ๆ ในการใช้ event.preventDefault () มากกว่า "return false" เพื่อยกเลิกการคลิก href?

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

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

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

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

นี่ไม่ใช่เนื่องจากคุณตั้งคำถามว่าเป็นคำถาม "JavaScript" มันเป็นคำถามเกี่ยวกับการออกแบบของ jQuery

jQuery และการอ้างอิงที่เชื่อมโยงก่อนหน้านี้จากJohn Resig (ในข้อความของ karim79 ) ดูเหมือนจะเป็นความเข้าใจผิดที่มาของวิธีการจัดการเหตุการณ์ในงานทั่วไป

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

เอกสารจาก MDNอธิบายถึงวิธีการreturn falseในการดำเนินกิจกรรมการทำงาน

สิ่งที่เกิดขึ้นใน jQuery ไม่เหมือนกับสิ่งที่เกิดขึ้นกับตัวจัดการเหตุการณ์ ผู้ฟังเหตุการณ์ DOM และเหตุการณ์ "แนบ" ของ MSIE นั้นแตกต่างกันโดยสิ้นเชิง

สำหรับการอ่านเพิ่มเติมดูattachEvent ใน MSDNและW3C DOM เอกสาร

โดยทั่วไปตัวเลือกแรกของคุณ ( preventDefault()) คือสิ่งที่ต้องดำเนินการ แต่คุณต้องรู้ว่าบริบทของคุณคืออะไรและเป้าหมายของคุณคืออะไร

เชื้อเพลิงในการเข้ารหัสของคุณมีดีบทความเกี่ยวกับreturn false;VS event.preventDefault()VSevent.stopPropagation()event.stopImmediatePropagation() VS

เมื่อใช้ jQuery return falseจะทำ 3 สิ่งแยกกันเมื่อคุณเรียกว่า

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

ดูjQuery Events: Stop (Mis) การใช้ Return Falseสำหรับข้อมูลและตัวอย่างเพิ่มเติม

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

ฉันคิด

event.preventDefault()

เป็นวิธีที่ w3c ระบุในการยกเลิกกิจกรรม

คุณสามารถอ่านบทความนี้ในสเป็คของ W3C ในการยกเลิกงานอีเว้นท์

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

ฉันคิดว่าวิธีที่ดีที่สุดในการทำเช่นนี้คือการใช้event.preventDefault()เพราะหากมีข้อยกเว้นบางอย่างเกิดขึ้นในตัวจัดการfalseคำสั่งส่งคืนจะถูกข้ามและพฤติกรรมจะตรงกันข้ามกับสิ่งที่คุณต้องการ

แต่ถ้าคุณแน่ใจว่ารหัสนั้นจะไม่เรียกใช้ข้อยกเว้นใด ๆ คุณสามารถไปตามวิธีการที่คุณต้องการได้

หากคุณยังต้องการกลับมาfalseคุณสามารถใส่รหัสตัวจัดการทั้งหมดของคุณในบล็อกลอง catch ดังนี้:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

ความคิดเห็นของฉันจากประสบการณ์ของฉันบอกว่ามันจะดีกว่าที่จะใช้

event.preventDefault() 

จวนจะหยุดหรือป้องกันการส่งเหตุการณ์เมื่อใดก็ตามที่เราต้องการมากกว่าreturn false event.preventDefault()ทำงานได้ดี

ความแตกต่างที่สำคัญระหว่างreturn falseและevent.preventDefault()คือรหัสของคุณด้านล่างreturn falseจะไม่ถูกเรียกใช้และในevent.preventDefault()กรณีที่รหัสของคุณจะทำงานหลังจากคำสั่งนี้

เมื่อคุณเขียนกลับเท็จมันทำสิ่งต่อไปนี้สำหรับคุณที่อยู่เบื้องหลัง

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

e.preventDefault ();

มันเพียงแค่หยุดการกระทำเริ่มต้นขององค์ประกอบ

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

ป้องกันไฮเปอร์ลิงก์จากการติดตาม URL ป้องกันไม่ให้ปุ่มส่งเพื่อส่งแบบฟอร์ม เมื่อคุณมีตัวจัดการเหตุการณ์จำนวนมากและคุณเพียงต้องการป้องกันไม่ให้เหตุการณ์เริ่มต้นเกิดขึ้น & เกิดขึ้นหลายครั้งเพื่อที่เราจะต้องใช้ที่ด้านบนของฟังก์ชั่น ()

เหตุผล:-

เหตุผลในการใช้งานe.preventDefault();คือในรหัสของเราดังนั้นสิ่งที่ผิดพลาดในรหัสนั้นจะอนุญาตให้เรียกใช้ลิงก์หรือแบบฟอร์มเพื่อส่งหรืออนุญาตให้เรียกใช้หรืออนุญาตให้ดำเนินการใด ๆ ที่คุณต้องทำ & ลิงก์หรือปุ่มส่งจะได้รับการส่ง & ยังอนุญาตการเผยแพร่กิจกรรมต่อไป

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

กลับเท็จ

มันจะหยุดการทำงานของฟังก์ชัน ()

" return false;" จะสิ้นสุดการดำเนินการตามกระบวนการทั้งหมด

เหตุผล:-

เหตุผลในการใช้คืนเป็นเท็จ คือคุณไม่ต้องการเรียกใช้ฟังก์ชั่นอีกต่อไปในโหมดเข้มงวด

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

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

ดังนั้นเราสามารถพูดได้ว่าคืนค่าเท็จjQueryมีค่าเท่ากับ:

return false คือ e.preventDefault AND e.stopPropagation

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

โดยทั่วไปก่อนที่จะเริ่มใช้return false;ครั้งแรกเข้าใจสิ่งที่e.preventDefault();และe.stopPropagation();ทำแล้วถ้าคุณคิดว่าคุณจำเป็นต้องใช้ทั้งในเวลาเดียวกันแล้วก็ใช้มัน

ดังนั้นโดยทั่วไปรหัสด้านล่างนี้:

$('div').click(function () {
  return false;
});

คือเท่ากับรหัสนี้:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

จากประสบการณ์ของฉัน event.stopPropagation () ส่วนใหญ่จะใช้ในเอฟเฟกต์ CSS หรืองานแอนิเมชั่นเช่นเมื่อคุณมีเอฟเฟ็กต์โฮเวอร์สำหรับองค์ประกอบทั้งการ์ดและปุ่มเมื่อคุณโฮเวอร์ที่ปุ่มทั้งเอฟเฟกต์การ์ดและปุ่ม คุณสามารถใช้ event.stopPropagation () หยุดการกระทำที่เดือดปุด ๆ และ event.preventDefault () เพื่อป้องกันพฤติกรรมเริ่มต้นของการกระทำของเบราว์เซอร์ ตัวอย่างเช่นคุณมีรูปแบบที่กำหนดไว้ แต่คุณเพียงเหตุการณ์คลิกสำหรับการดำเนินการส่งถ้าส่งผู้ใช้รูปแบบโดยการกด Enter, เบราว์เซอร์เรียกโดยเหตุการณ์ปุ่มกดไม่ได้คลิกเหตุการณ์ของคุณที่นี่คุณควรใช้ event.preventDefault () เพื่อหลีกเลี่ยงความไม่เหมาะสม พฤติกรรม. ฉันไม่รู้ว่าอะไรคือสิ่งที่ผิดพลาด ขออภัยสำหรับความกระจ่างเพิ่มเติมเยี่ยมชมลิงค์นี้และเล่นกับบรรทัด # 33https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv