Habang nag-a-update ng isang web page o sa website, may mga sitwasyon kung saan ang ilang mga kasamang link ay hindi na kailangan o nagiging hindi nauugnay. Bilang karagdagan doon, epektibong pamamahala sa trapiko ng isang partikular na website. Sa ganitong mga kaso, ang pagkansela ng mga kaganapan sa JavaScript ay nakagagawa ng mga kababalaghan sa hindi pagpapagana ng ilang functionality at paghawak sa mga ganitong sitwasyon ng kaso.
Paano Kanselahin ang Mga Kaganapan sa JavaScript?
Ang mga sumusunod na diskarte ay maaaring gamitin upang kanselahin ang mga kaganapan sa JavaScript:
-
- “ preventDefault() ” paraan.
- “ Halaga ng Boolean ' lapitan.
- “ stopPropagation() ” paraan.
Diskarte 1: Kanselahin ang Mga Kaganapan sa JavaScript Gamit ang Paraang preventDefault().
Ang ' preventDefault() ' kinansela ng pamamaraan ang kalakip na kaganapan kung ito ay maaaring kanselahin. Maaaring gamitin ang paraang ito upang alisin ang naka-attach na kaganapan mula sa na-access na link sa gayon ay mapipigilan ang pagkilos na isasagawa.
Syntax
kaganapan.preventDefault ( )
Sa ibinigay na syntax:
-
- “ kaganapan ” ay tumutukoy sa kaganapang ihihiwalay.
Halimbawa
Pumunta sa ibinigay na code-snippet sa ibaba:
< h3 > Kakanselahin ang kaganapan sa Pag-click ! h3 >
< a id = 'lugar' href = 'https://www.google.com/' > Bisitahin ang Google Website a >
document.getElementById ( 'lugar' ) .addEventListener ( 'click' , function ( kanselahin ) {
cancel.preventDefault ( ) ;
} ) ;
Sundin ang mga hakbang na nakasaad sa ibaba:
-
- Una, isama ang nakasaad na heading na ipapakita sa Document Object Model(DOM).
- Pagkatapos nito, tukuyin ang ' URL ' gamit ang ' href ” katangian.
- Ngayon, sa bahagi ng JavaScript ng code, i-access ang tinukoy na URL.
- Gayundin, maglakip ng ' i-click ” event na may URL sa tulong ng isang function gamit ang “ addEventListener() ” paraan.
- Sa wakas, ang ' preventDefault() ” paraan ay ilalapat sa tulong ng parameter ng function upang matanggal ang kalakip na kaganapan.
Output
Diskarte 2: Kanselahin ang Mga Kaganapan sa JavaScript sa pamamagitan ng Pagbabalik ng Boolean Value
Ang pamamaraang ito ay maaaring ipatupad sa pamamagitan ng pagbabalik ng ' mali ” boolean value sa na-trigger na kaganapan.
Halimbawa
Ang mga sumusunod na linya ng code ay nagpapakita ng nakasaad na konsepto:
< gitna >< input uri = 'text' placeholder = 'Ipasok ang Teksto' onput = 'cancelEvent()' > gitna >function cancelEvent ( ) {
bumalik mali ;
alerto ( 'Ang pahayag na ito ay hindi ipapakita' )
}
Sa snippet ng code sa itaas:
-
- Una, sa loob ng '
” tag, maglaan ng field ng input ng text. - Gayundin, maglakip ng ' onput 'kaganapang may tinukoy na' placeholder ” halaga. Magreresulta ito sa pag-invoke ng tinukoy na function sa pag-input ng text.
- Ngayon, sa bahagi ng JavaScript ng code, ipahayag ang isang function na pinangalanang ' cancelEvent() ”. Sa kahulugan nito, ibalik ang boolean value ' mali 'upang kanselahin ang kasama' kaganapan ”.
- Panghuli, tukuyin ang nakasaad na mensahe sa kahon ng alerto. Ang ibinalik na boolean value ay magreresulta sa pag-iwas sa dialogue box na ipapakita.
- Una, sa loob ng '
Output
Sa output sa itaas, mapapansin na sa na-access na function, hindi ipinapakita ang alert dialogue box sa gayon ay kinakansela ang kalakip na kaganapan.
Diskarte 3: Kanselahin ang Mga Kaganapan sa JavaScript Gamit ang Paraan ng stopPropagation().
Ang ' stopPropagation() ” paraan ay pumipigil sa parehong kaganapan mula sa pagpapalaganap. Ang pamamaraang ito ay maaaring gamitin upang ihinto ang pagpapalaganap sa pagitan ng dalawang div sa pag-check sa checkbox.
Syntax
kaganapan.stopPropagation ( )
Halimbawa
Obserbahan ang mga sumusunod na linya ng code:
< gitna >< h3 > Mag-click sa Website upang obserbahan ang pagbabago: h3 >< div onclick = 'elemento2()' > Linux
< div onclick = 'elemento1(kaganapan)' > Website div >
div >
< br >
Lagyan ng check para Ihinto ang Pagpapalaganap:
< input uri = 'checkbox' id = 'suriin' >
gitna >
-
- Sa unang hakbang, gayundin, isama ang nakasaad na heading.
- Ngayon, isama ang dalawang ' div 'mga tag na may kalakip na' onclick ” na mga kaganapan sa bawat isa sa kanila na gumagamit ng dalawang magkaibang function element2() at element1().
- Gayundin, magsama ng checkbox na may tinukoy na id. Ang checkbox na ito ay magreresulta sa pagpapahinto sa pagpapalaganap sa pagitan ng dalawang div.
Ngayon, tingnan ang sumusunod na mga linya ng code ng JavaScript:
function elemento1 ( at ) {alerto ( 'Nag-click ka sa Website' ) ;
kung ( document.getElementById ( 'suriin' ) .nasuri ) {
e.stopPropagation ( ) ;
}
}
function elemento2 ( ) {
alerto ( 'Nag-click ka sa Linuxhint' ) ;
}
Sa itaas na js code:
-
- Tukuyin ang isang function na pinangalanang ' elemento1() ”. Dito, ang parameter ' at ' tumutukoy sa ' kaganapan ” na pinapagana na tinukoy sa HTML na bahagi ng code.
- Sa kahulugan nito, ipakita ang alert dialogue box na mayroong nakasaad na mensahe.
- Pagkatapos nito, i-access ang nilikha na checkbox sa pamamagitan ng id nito gamit ang ' getElementById() ” paraan. Gayundin, ilapat ang ' sinuri ” property dito upang masuri ang kondisyon ng may check na checkbox.
- Pagkatapos, ilapat ang ' stopPropagation() 'paraan na tumutukoy sa parameter' at ”. Magreresulta ito sa pagpapahinto ng pagpapalaganap mula sa isang function patungo sa isa pang function.
- Katulad nito, tukuyin ang isa pang function na ' element2() ” para palaganapin. Ang function na ito ay gagana bago ang pagpapalaganap lamang.
Output
Dito, sinusunod ang pag-uugali sa pag-click sa div sa pag-check sa checkbox.
Pinagsama-sama namin ang mga diskarte upang kanselahin ang mga kaganapan sa JavaScript.
Konklusyon
Ang ' preventDefault() 'paraan, ang' halaga ng boolean 'diskarte, o ang' stopPropagation() ” paraan ay maaaring gamitin upang kanselahin ang mga kaganapan sa JavaScript. Ang unang paraan ay maaaring ipatupad upang tanggalin ang naka-attach na kaganapan na nagreresulta sa hindi pagpapagana ng link. Ibinabalik ng boolean value approach ang “ mali ” boolean value sa na-trigger na kaganapan. Ang stopPropagation() na paraan ay maaaring ilapat upang ihinto ang pagpapalaganap sa pagitan ng dalawang div sa tulong ng isang kasamang checkbox. Ipinaliwanag ng tutorial na ito ang pagkansela ng mga kaganapan sa JavaScript.