jQuery Academy · บทเรียน

การหยุดการส่งต่อเหตุการณ์

การหยุดการส่งต่อเหตุการณ์ เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

ควบคุมเหตุการณ์ของคุณ!

เหตุการณ์ต่าง ๆ เช่น การคลิกหรือการส่งแบบฟอร์มไม่ได้เกิดขึ้นบนองค์ประกอบเพียงตัวเดียวเท่านั้น เหตุการณ์เหล่านี้มักเดินทางผ่าน Document Object Model (DOM)

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

การป้องกันการทำงานเริ่มต้น

เบราว์เซอร์มี การทำงานเริ่มต้น สำหรับองค์ประกอบ HTML หลายประเภท ตัวอย่างเช่น:

การคลิกแท็ก <a> จะนำทางไปยังหน้าใหม่
การส่ง <form> จะโหลดหน้าเว็บใหม่

เราใช้ event.preventDefault() เพื่อหยุดพฤติกรรมในตัวของเบราว์เซอร์เหล่านี้

การใช้งาน `preventDefault()`

ลองคลิกลิงก์ด้านล่าง โดยปกติลิงก์จะพาคุณไปยัง example.com แต่ .preventDefault() จะหยุดการนำทางนั้น!

<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Prevent Default Example</h1>
  <a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myLink').on('click', function(event) {
      event.preventDefault(); // Stop the link from navigating
      $('#output').append('<p>Link click prevented! You\'re still here.</p>');
    });
  });
  </script>
</body>
</html>

ทำความเข้าใจการลอยขึ้นของเหตุการณ์

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

เหตุการณ์จะเรียกใช้ตัวจัดการบนองค์ประกอบแม่
จากนั้นจึงไปยังองค์ประกอบปู่
และดำเนินต่อไปเรื่อย ๆ จนถึง <body> และ <html>

การเดินทางขึ้นด้านบนนี้เรียกว่า การลอยขึ้นของเหตุการณ์

หยุดการลอยขึ้น: `stopPropagation()`

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

ในกรณีนี้ event.stopPropagation() จะเข้ามาช่วย โดยจะหยุดไม่ให้เหตุการณ์ลอยขึ้นต่อไปตามโครงสร้าง DOM

ตัวอย่าง `stopPropagation()`

คลิกกล่องด้านใน หากไม่มี stopPropagation() ข้อความทั้งสองรายการจะแสดงขึ้น แต่เมื่อใช้คำสั่งนี้ จะมีเพียงข้อความของกล่องด้านในเท่านั้นที่แสดง เพราะการลอยขึ้นถูกหยุดไว้

<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #outer {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
  #inner {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <h1>Stop Propagation Example</h1>
  <div id="outer">
    Outer Div (Click me!)
    <div id="inner">
      Inner Div (Click me!)
    </div>
  </div>
  <div id="log"></div>

  <script>
  $(document).ready(function() {
    $('#outer').on('click', function() {
      $('#log').append('<p>Outer Div clicked!</p>');
    });

    $('#inner').on('click', function(event) {
      event.stopPropagation(); // Stop bubbling here
      $('#log').append('<p>Inner Div clicked!</p>');
    });
  });
  </script>
</body>
</html>

การใช้งานจริงของการหยุดการลอยขึ้น

stopPropagation() มีประโยชน์ในสถานการณ์ต่าง ๆ เช่น:

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

ออบเจ็กต์เหตุการณ์

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

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

<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Event Object Properties</h1>
  <button id="myButton">Click Me</button>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myButton').on('click', function(event) {
      $('#output').empty(); // Clear previous output
      $('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
      $('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
      $('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
      $('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
    });
  });
  </script>
</body>
</html>

การใช้ทั้งสองเมธอดร่วมกัน

บางครั้งคุณจำเป็นต้องใช้ทั้ง .preventDefault() และ .stopPropagation() เมธอดทั้งสองแก้ปัญหาที่แตกต่างกัน:

.preventDefault(): หยุดการทำงานเริ่มต้นของเบราว์เซอร์
.stopPropagation(): หยุดไม่ให้เหตุการณ์เดินทางขึ้นไปตาม DOM

ตัวอย่างเช่น ปุ่มภายในองค์ประกอบที่ซับซ้อนอาจต้องป้องกันการทำงานเริ่มต้นเมื่อคลิก และหยุดไม่ให้การคลิกนั้นเรียกใช้ตัวจัดการบนองค์ประกอบแม่

ทำความเข้าใจการควบคุมเหตุการณ์

คุณมีลิงก์ <a href="#" id="link"> อยู่ภายใน div <div id="container"> คุณต้องการป้องกันไม่ให้ลิงก์นำทาง และป้องกันไม่ให้เหตุการณ์การคลิกเรียกใช้ตัวจัดการใด ๆ บน #container ด้วย

ทบทวน: การควบคุมเหตุการณ์

ทำได้ดีมากครับ/ค่ะ! คุณได้เรียนรู้การควบคุมการไหลของเหตุการณ์แล้ว:

.preventDefault(): หยุดการทำงานเริ่มต้นของเบราว์เซอร์สำหรับเหตุการณ์หนึ่ง ๆ เช่น การนำทางของลิงก์หรือการส่งแบบฟอร์ม
.stopPropagation(): ป้องกันไม่ให้เหตุการณ์ลอยขึ้นตามโครงสร้าง DOM ไปยังองค์ประกอบแม่

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

คำถามที่พบบ่อย

บทเรียน “การหยุดการส่งต่อเหตุการณ์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การหยุดการส่งต่อเหตุการณ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การหยุดการส่งต่อเหตุการณ์”

ทำความเข้าใจ .stopPropagation() และ .preventDefault() เพื่อควบคุมการไหลของเหตุการณ์ ป้องกันการทำงานเริ่มต้นของเบราว์เซอร์ และจัดการการโต้ตอบของเหตุการณ์ที่ซับซ้อนได้อย่างมีประสิทธิภาพ คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

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

บทเรียน “การหยุดการส่งต่อเหตุการณ์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ jQuery Academy