วิธีตรวจจับการคลิกภายนอกองค์ประกอบด้วย JavaScript

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

จาวาสคริปต์พื้นฐานภายนอกการตรวจจับองค์ประกอบ

สร้างองค์ประกอบกล่องใน HTML:

<div class="box">
  If you click anywhere outside of me, I’m gone faster than you can snap your
  fingers.
</div>

มาจัดรูปแบบกล่องด้วย CSS และสร้าง ซ่อนคลาสยูทิลิตี้องค์ประกอบ:

.box {
  margin: 1rem auto 1rem auto;
  max-width: 300px;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
}

.js-is-hidden {
  display: none;
}

และสคริปต์ตรวจจับการคลิก JavaScript:

// Select element with box class, assign to box variable
const box = document.querySelector(".box")
// Detect all clicks on the document
document.addEventListener("click", function(event) {
  // If user clicks inside the element, do nothing
  if (event.target.closest(".box")) return
  // If user clicks outside the element, hide it!
  box.classList.add("js-is-hidden")
})

นี่คือ CodePen ที่มีรหัสทั้งหมด

วิธีการทำงานของโค้ด JavaScript:

• อันดับแรก เราพบองค์ประกอบกล่องที่มี querySelector() และกำหนดให้กับตัวแปรชื่อ box
• จากนั้นเราแนบ addEventListener() ไปที่เอกสารของเราและบอกให้ฟังเมื่อมีการคลิกบนเอกสาร (ทั้งหน้า)
• เมื่อผู้ใช้คลิกที่เอกสาร ตามด้วย function() เริ่มคำสั่งแบบมีเงื่อนไขภายในบล็อคโค้ด { .. } :
• หากผู้ใช้คลิกภายในองค์ประกอบกล่อง (event.target.closest ) แล้วไม่ทำอะไรเลย (นั่นคือ return; ส่วนหนึ่ง)
• แต่หากพวกเขาคลิกนอกองค์ประกอบกล่อง เราก็ซ่อนมันโดยใช้ classList.add วิธีการเพิ่ม .js-is-hidden คลาส CSS (ด้วย display: none ทรัพย์สิน) ที่เราสร้างขึ้นก่อนหน้านี้

ตอนนี้คุณรู้วิธีตรวจจับการคลิกภายนอกองค์ประกอบแล้ว!

ปิดท้าย

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