จะยกเลิกกิจกรรมใน JavaScript ได้อย่างไร

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

จะยกเลิกกิจกรรมใน JavaScript ได้อย่างไร

สามารถใช้วิธีการต่อไปนี้เพื่อยกเลิกกิจกรรมใน JavaScript:

- “ ป้องกันค่าเริ่มต้น () ' กระบวนการ.
- “ ค่าบูลีน ' เข้าใกล้.
- “ หยุดการขยายพันธุ์ () ' กระบวนการ.

วิธีที่ 1: ยกเลิกกิจกรรมใน JavaScript โดยใช้วิธีป้องกันค่าเริ่มต้น ()

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

ไวยากรณ์

event.preventDefault ( )

ในไวยากรณ์ที่กำหนด:

- “ เหตุการณ์ ” หมายถึงเหตุการณ์ที่จะแยกออก

ตัวอย่าง

ผ่านโค้ดที่ได้รับด้านล่าง:

< h3 > กิจกรรม Click จะถูกยกเลิก ! h3 >
< เอ id = 'เว็บไซต์' href = 'https://www.google.com/' > เยี่ยมชมเว็บไซต์ Google เอ >
document.getElementById ( 'เว็บไซต์' ) .addEventListener ( 'คลิก' , การทำงาน ( ยกเลิก ) {
cancel.preventDefault ( ) ;
} ) ;

ทำตามขั้นตอนที่ระบุไว้ด้านล่าง:

- ประการแรก รวมส่วนหัวที่ระบุไว้เพื่อแสดงบน Document Object Model (DOM)
- หลังจากนั้นให้ระบุ “ URL ' ใช้ ' href ' คุณลักษณะ.
- ตอนนี้ ในส่วน JavaScript ของโค้ด ให้เข้าถึง URL ที่ระบุ
- พร้อมทั้งแนบ “ คลิก ” ด้วย URL ด้วยความช่วยเหลือของฟังก์ชั่นโดยใช้ “ addEventListener() ' กระบวนการ.
- สุดท้ายนี้ “ ป้องกันค่าเริ่มต้น () ” จะถูกนำไปใช้โดยใช้พารามิเตอร์ของฟังก์ชันเพื่อแยกเหตุการณ์ที่แนบมา

เอาท์พุต

วิธีที่ 2: ยกเลิกกิจกรรมใน JavaScript โดยส่งคืนค่าบูลีน

วิธีนี้สามารถทำได้โดยการส่งคืน “ เท็จ ” ค่าบูลีนเมื่อเกิดเหตุการณ์

ตัวอย่าง

บรรทัดของรหัสต่อไปนี้แสดงให้เห็นถึงแนวคิดที่ระบุไว้:

< ศูนย์กลาง >< ป้อนข้อมูล พิมพ์ = 'ข้อความ' ตัวยึดตำแหน่ง = 'ป้อนข้อความ' oninput = 'ยกเลิกกิจกรรม()' > ศูนย์กลาง >
การทำงาน ยกเลิกกิจกรรม ( ) {
กลับ เท็จ ;
เตือน ( 'คำสั่งนี้จะไม่ปรากฏ' )
}

ในข้อมูลโค้ดด้านบน:

- ประการแรก ภายใน “ ” จัดสรรช่องข้อความอินพุต
- พร้อมทั้งแนบ “ oninput ” เหตุการณ์ที่มีกำหนด “ ตัวยึดตำแหน่ง ' ค่า. ซึ่งจะส่งผลให้เรียกใช้ฟังก์ชันที่ระบุเมื่อป้อนข้อความ
- ตอนนี้ ในส่วน JavaScript ของโค้ด ให้ประกาศฟังก์ชันชื่อ “ ยกเลิกกิจกรรม() ” ในคำจำกัดความ ให้คืนค่าบูลีน ' เท็จ ” เพื่อยกเลิกรายการรวม “ เหตุการณ์ ”
- สุดท้าย ระบุข้อความที่ระบุในกล่องแจ้งเตือน ค่าบูลีนที่ส่งคืนจะทำให้ไม่สามารถแสดงกล่องโต้ตอบได้

เอาท์พุต

ในผลลัพธ์ข้างต้น สังเกตได้ว่าเมื่อใช้งานฟังก์ชันที่เข้าถึง กล่องโต้ตอบการแจ้งเตือนจะไม่แสดงขึ้น จึงเป็นการยกเลิกกิจกรรมที่แนบมา

วิธีที่ 3: ยกเลิกกิจกรรมใน JavaScript โดยใช้วิธี stopPropagation()

“ หยุดการขยายพันธุ์ () เมธอด ” ป้องกันไม่ให้มีการเผยแพร่เหตุการณ์เดียวกัน สามารถใช้วิธีนี้เพื่อหยุดการเผยแพร่ระหว่างสอง divs เมื่อทำเครื่องหมายที่ช่องทำเครื่องหมาย

ไวยากรณ์

เหตุการณ์.หยุดการขยายพันธุ์ ( )

ตัวอย่าง

สังเกตบรรทัดของรหัสต่อไปนี้:

< ศูนย์กลาง >< h3 > คลิกที่เว็บไซต์เพื่อดูการเปลี่ยนแปลง: h3 >
< div เมื่อคลิก = 'องค์ประกอบ2()' > ลินุกซ์
< div เมื่อคลิก = 'องค์ประกอบ1(เหตุการณ์)' > เว็บไซต์ div >
div >
< br >
ตรวจสอบเพื่อหยุดการขยายพันธุ์:
< ป้อนข้อมูล พิมพ์ = 'ช่องทำเครื่องหมาย' id = 'ตรวจสอบ' >
ศูนย์กลาง >

- ในขั้นตอนแรก ในทำนองเดียวกัน ให้รวมหัวเรื่องที่ระบุไว้
- ตอนนี้รวมสอง “ div ” แท็กพร้อมแนบ “ เมื่อคลิก ” เหตุการณ์ที่แต่ละเหตุการณ์เรียกฟังก์ชันที่แตกต่างกันสองอย่าง element2() และ element1()
- รวมถึงช่องทำเครื่องหมายที่มีรหัสที่ระบุ ช่องทำเครื่องหมายนี้จะส่งผลให้หยุดการเผยแพร่ระหว่างสอง divs

ตอนนี้ให้ดูที่บรรทัดโค้ด JavaScript ต่อไปนี้:

การทำงาน องค์ประกอบ1 ( และ ) {
เตือน ( 'คุณคลิกเว็บไซต์' ) ;
ถ้า ( document.getElementById ( 'ตรวจสอบ' ) .checked ) {
e.หยุดการขยายพันธุ์ ( ) ;
}
}
การทำงาน element2 ( ) {
เตือน ( 'คุณคลิก Linuxhint' ) ;
}

ในรหัส js ด้านบน:

- กำหนดฟังก์ชันชื่อ “ องค์ประกอบ 1() ” ที่นี่พารามิเตอร์ “ และ ” หมายถึง “ เหตุการณ์ ” ถูกไล่ออกตามที่ระบุในส่วน HTML ของโค้ด
- ในคำจำกัดความ ให้แสดงกล่องโต้ตอบการแจ้งเตือนที่มีข้อความที่ระบุ
- หลังจากนั้นเข้าถึงช่องทำเครื่องหมายที่สร้างขึ้นโดยใช้รหัสโดยใช้ ' getElementById() ' กระบวนการ. ยังใช้ “ ตรวจสอบแล้ว ” ไปเพื่อเช็คสภาพของช่องทำเครื่องหมาย
- จากนั้นใช้ “ หยุดการขยายพันธุ์ () ” วิธีการอ้างอิงถึงพารามิเตอร์ “ และ ” ซึ่งจะส่งผลให้หยุดการแพร่กระจายจากฟังก์ชันหนึ่งไปยังอีกฟังก์ชันหนึ่ง
- ในทำนองเดียวกันให้กำหนดฟังก์ชันอื่น “ องค์ประกอบ2() ” ที่จะเผยแพร่ต่อ ฟังก์ชันนี้จะใช้งานได้ก่อนการเผยแพร่เท่านั้น

เอาท์พุต

ที่นี่ สังเกตพฤติกรรมเมื่อคลิก div เมื่อทำเครื่องหมายที่ช่องทำเครื่องหมาย

เราได้รวบรวมวิธีการยกเลิกกิจกรรมใน JavaScript

บทสรุป

“ ป้องกันค่าเริ่มต้น () ” วิธีการ “ ค่าบูลีน ” แนวทางหรือ “ หยุดการขยายพันธุ์ () สามารถใช้เมธอด ” เพื่อยกเลิกกิจกรรมใน JavaScript วิธีแรกสามารถใช้เพื่อแยกเหตุการณ์ที่แนบมาส่งผลให้ลิงก์ถูกปิดใช้งาน แนวทางค่าบูลีนส่งคืน “ เท็จ ” ค่าบูลีนเมื่อเกิดเหตุการณ์ สามารถใช้เมธอด stopPropagation() เพื่อหยุดการแพร่กระจายระหว่างสอง div ด้วยความช่วยเหลือของช่องทำเครื่องหมายที่รวมไว้ บทช่วยสอนนี้อธิบายการยกเลิกกิจกรรมใน JavaScript

จะยกเลิกกิจกรรมใน JavaScript ได้อย่างไร