Anonim

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

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

แสดง Div Click ภายในกล่องดำไม่มีอะไรเกิดขึ้น คลิกที่ด้านนอกมันจะหายไป $ ('# showbox'). คลิก (ฟังก์ชัน () {$ ('# bigbox'). show (ฟังก์ชั่น () {document.body.addEventListener ('คลิก', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('คลิก', boxCloser, false); $ ( '# bigbox') ซ่อน (). }}

นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณรวม jQuery ในโครงการของคุณเนื่องจากฟังก์ชันการทำงานบางอย่างด้านบนใช้ไลบรารีนั้น

ปิด div หรือเมนูเมื่อคลิกนอก w / javascript