వెబ్‌పేజీ లేదా వెబ్‌సైట్‌ను అప్‌డేట్ చేస్తున్నప్పుడు, కొన్ని చేర్చబడిన లింక్‌లు ఇక అవసరం లేని లేదా అసంబద్ధం అయ్యే పరిస్థితులు ఉన్నాయి. దానితో పాటు, నిర్దిష్ట వెబ్సైట్ యొక్క ట్రాఫిక్‌ను సమర్థవంతంగా నిర్వహించడం. అటువంటి సందర్భాలలో, JavaScriptలో ఈవెంట్‌లను రద్దు చేయడం వలన కొన్ని కార్యాచరణలను నిలిపివేయడం మరియు అలాంటి సందర్భాలను నిర్వహించడంలో అద్భుతాలు చేస్తాయి.
జావాస్క్రిప్ట్‌లో ఈవెంట్‌లను ఎలా రద్దు చేయాలి?
జావాస్క్రిప్ట్‌లో ఈవెంట్‌లను రద్దు చేయడానికి క్రింది విధానాలను ఉపయోగించవచ్చు:
-
- ' డిఫాల్ట్ నిరోధించు() ” పద్ధతి.
- ' బూలియన్ విలువ ” విధానం.
- ' ఆపు ప్రచారం() ” పద్ధతి.
విధానం 1: PreventDefault() పద్ధతిని ఉపయోగించి JavaScriptలో ఈవెంట్‌లను రద్దు చేయండి
ది ' డిఫాల్ట్ నిరోధించు() ”అటాచ్ చేసిన ఈవెంట్ రద్దు చేయగలిగితే పద్ధతి రద్దు చేస్తుంది. యాక్సెస్ చేయబడిన లింక్ నుండి జోడించిన ఈవెంట్‌ను వేరు చేయడానికి ఈ పద్ధతిని ఉపయోగించవచ్చు, తద్వారా చర్యను నిరోధించవచ్చు.
వాక్యనిర్మాణం
event.preventDefault ( )
ఇచ్చిన సింటాక్స్‌లో:
-
- ' సంఘటన ” అనేది వేరు చేయవలసిన సంఘటనను సూచిస్తుంది.
ఉదాహరణ
క్రింద ఇవ్వబడిన కోడ్-స్నిప్పెట్ ద్వారా వెళ్ళండి:
< h3 > క్లిక్ ఈవెంట్ రద్దు చేయబడుతుంది ! h3 >
< a id = 'సైట్' href = 'https://www.google.com/' > Google వెబ్‌సైట్‌ని సందర్శించండి a >
document.getElementById ( 'సైట్' ) .addEventListener ( 'క్లిక్' , ఫంక్షన్ ( రద్దు చేయండి ) {
రద్దు.నివారణ డిఫాల్ట్ ( ) ;
} ) ;
దిగువ పేర్కొన్న దశలను అనుసరించండి:
-
- ముందుగా, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM)లో ప్రదర్శించబడే పేర్కొన్న శీర్షికను చేర్చండి.
- ఆ తరువాత, పేర్కొనండి ' URL 'ఉపయోగించి' href ' గుణం.
- ఇప్పుడు, కోడ్ యొక్క జావాస్క్రిప్ట్ భాగంలో, పేర్కొన్న URLని యాక్సెస్ చేయండి.
- అలాగే, “ని జత చేయండి క్లిక్ చేయండి URLతో ఈవెంట్‌ని ఉపయోగించి ఫంక్షన్ సహాయంతో addEventListener() ” పద్ధతి.
- చివరగా, ' డిఫాల్ట్ నిరోధించు() ”అటాచ్ చేసిన ఈవెంట్‌ను వేరు చేయడానికి ఫంక్షన్ యొక్క పారామీటర్ సహాయంతో పద్ధతి వర్తించబడుతుంది.
అవుట్‌పుట్
విధానం 2: బూలియన్ విలువను తిరిగి ఇవ్వడం ద్వారా జావాస్క్రిప్ట్‌లో ఈవెంట్‌లను రద్దు చేయండి
'ని తిరిగి ఇవ్వడం ద్వారా ఈ విధానాన్ని అమలు చేయవచ్చు తప్పుడు ట్రిగ్గర్ చేయబడిన ఈవెంట్‌పై బూలియన్ విలువ.
ఉదాహరణ
కోడ్ యొక్క క్రింది పంక్తులు పేర్కొన్న భావనను ప్రదర్శిస్తాయి:
< కేంద్రం >< ఇన్పుట్ రకం = 'వచనం' ప్లేస్‌హోల్డర్ = 'వచనాన్ని నమోదు చేయండి' ఆన్‌పుట్ = 'ఈవెంట్‌ను రద్దు చేయి()' > కేంద్రం >ఫంక్షన్ ఈవెంట్ రద్దు ( ) {
తిరిగి తప్పుడు ;
అప్రమత్తం ( 'ఈ ప్రకటన ప్రదర్శించబడదు' )
}
పై కోడ్ స్నిప్పెట్‌లో:
-
- మొదట, లోపల ' <కేంద్రం> ” ట్యాగ్, ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను కేటాయించండి.
- అలాగే, “ని జతచేయండి ఆన్‌పుట్ 'పేర్కొన్న' ఈవెంట్ ప్లేస్‌హోల్డర్ ' విలువ. ఇది టెక్స్ట్‌ను ఇన్పుట్ చేసిన తర్వాత పేర్కొన్న ఫంక్షన్‌ను అమలులోకి తెస్తుంది.
- ఇప్పుడు, కోడ్ యొక్క జావాస్క్రిప్ట్ భాగంలో, '' అనే ఫంక్షన్‌ను ప్రకటించండి. ఈవెంట్ రద్దు () ”. దాని నిర్వచనంలో, బూలియన్ విలువను తిరిగి ఇవ్వండి ' తప్పుడు 'చేర్చబడిన వాటిని రద్దు చేయడానికి' సంఘటన ”.
- చివరగా, హెచ్చరిక పెట్టెలో పేర్కొన్న సందేశాన్ని పేర్కొనండి. తిరిగి వచ్చిన బూలియన్ విలువ ప్రదర్శించబడే డైలాగ్ బాక్స్‌ను నివారించడంలో దారి తీస్తుంది.
అవుట్‌పుట్
ఎగువ అవుట్‌పుట్‌లో, యాక్సెస్ చేయబడిన ఫంక్షన్‌పై, హెచ్చరిక డైలాగ్ బాక్స్ ప్రదర్శించబడదని తద్వారా జోడించిన ఈవెంట్‌ను రద్దు చేయడం గమనించవచ్చు.
విధానం 3: స్టాప్‌ప్రొపగేషన్() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో ఈవెంట్‌లను రద్దు చేయండి
ది ' ఆపు ప్రచారం() ” పద్ధతి అదే సంఘటనను ప్రచారం చేయకుండా నిరోధిస్తుంది. చెక్‌బాక్స్‌ని తనిఖీ చేసిన తర్వాత రెండు divల మధ్య ప్రచారం చేయడాన్ని ఆపడానికి ఈ పద్ధతిని ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
ఈవెంట్.స్టాప్‌ప్రొపగేషన్ ( )
ఉదాహరణ
కోడ్ యొక్క క్రింది పంక్తులను గమనించండి:
< కేంద్రం >< h3 > మార్పును గమనించడానికి వెబ్‌సైట్‌పై క్లిక్ చేయండి: h3 >< div క్లిక్ చేయండి = 'మూలకం2()' > Linux
< div క్లిక్ చేయండి = 'మూలకం1(ఈవెంట్)' > వెబ్సైట్ div >
div >
< br >
ప్రచారం ఆపడానికి తనిఖీ చేయండి:
< ఇన్పుట్ రకం = 'చెక్ బాక్స్' id = 'తనిఖీ' >
కేంద్రం >
-
- మొదటి దశలో, అదేవిధంగా, పేర్కొన్న శీర్షికను చేర్చండి.
- ఇప్పుడు, రెండింటిని చేర్చండి' div 'టాగ్‌లు జోడించబడ్డాయి' క్లిక్ చేయండి ” ఈవెంట్‌లు ప్రతి ఒక్కటి రెండు వేర్వేరు ఫంక్షన్‌లను ఎలిమెంట్2() మరియు ఎలిమెంట్1()ని సూచిస్తాయి.
- అలాగే, పేర్కొన్న idతో చెక్‌బాక్స్‌ను చేర్చండి. ఈ చెక్‌బాక్స్ రెండు divల మధ్య ప్రచారాన్ని నిలిపివేస్తుంది.
ఇప్పుడు, కోడ్ యొక్క క్రింది జావాస్క్రిప్ట్ లైన్లను చూడండి:
ఫంక్షన్ మూలకం1 ( మరియు ) {అప్రమత్తం ( 'మీరు వెబ్‌సైట్‌ను క్లిక్ చేసారు' ) ;
ఉంటే ( document.getElementById ( 'తనిఖీ' ) .తనిఖీ చేశారు ) {
e.StopPropagation ( ) ;
}
}
ఫంక్షన్ మూలకం2 ( ) {
అప్రమత్తం ( 'మీరు Linuxhint క్లిక్ చేసారు' ) ;
}
పై js కోడ్‌లో:
-
- ' అనే ఫంక్షన్‌ను నిర్వచించండి మూలకం1() ”. ఇక్కడ, పరామితి ' మరియు ''ని సూచిస్తుంది సంఘటన ” కోడ్ యొక్క HTML భాగంలో పేర్కొనబడిన తొలగించబడుతోంది.
- దాని నిర్వచనంలో, పేర్కొన్న సందేశాన్ని కలిగి ఉన్న హెచ్చరిక డైలాగ్ బాక్స్‌ను ప్రదర్శించండి.
- ఆ తర్వాత, సృష్టించిన చెక్‌బాక్స్‌ని దాని ఐడి ద్వారా యాక్సెస్ చేయండి “ getElementById() ” పద్ధతి. అలాగే, వర్తించు “ తనిఖీ చేశారు 'చెక్ చేసిన చెక్‌బాక్స్ పరిస్థితిని తనిఖీ చేయడానికి దానికి ప్రాపర్టీ.
- అప్పుడు, వర్తించు ' ఆపు ప్రచారం() 'పరామితిని సూచించే పద్ధతి' మరియు ”. ఇది ఒక ఫంక్షన్ నుండి మరొక ఫంక్షన్‌కు ప్రచారాన్ని ఆపడానికి దారి తీస్తుంది.
- అదేవిధంగా, మరొక ఫంక్షన్ నిర్వచించండి ' మూలకం2() ”పై ప్రచారం చేయాలి. ఈ ఫంక్షన్ ప్రచారానికి ముందు మాత్రమే పని చేస్తుంది.
అవుట్‌పుట్
ఇక్కడ, చెక్‌బాక్స్‌ని తనిఖీ చేసిన తర్వాత divని క్లిక్ చేయడం ద్వారా ప్రవర్తనను గమనిస్తుంది.
మేము JavaScriptలో ఈవెంట్‌లను రద్దు చేసే విధానాలను సంకలనం చేసాము.
ముగింపు
ది ' డిఫాల్ట్ నిరోధించు() 'పద్ధతి,' బూలియన్ విలువ 'విధానం, లేదా' ఆపు ప్రచారం() ” జావాస్క్రిప్ట్‌లో ఈవెంట్‌లను రద్దు చేయడానికి పద్ధతిని ఉపయోగించవచ్చు. జోడించిన ఈవెంట్‌ను వేరు చేయడానికి మొదటి పద్ధతిని అమలు చేయవచ్చు, ఫలితంగా లింక్‌ని నిలిపివేయవచ్చు. బూలియన్ విలువ విధానం ' తప్పుడు ట్రిగ్గర్ చేయబడిన ఈవెంట్‌పై బూలియన్ విలువ. చేర్చబడిన చెక్‌బాక్స్ సహాయంతో రెండు divల మధ్య ప్రచారం చేయడాన్ని ఆపడానికి stopPropagation() పద్ధతిని అన్వయించవచ్చు. ఈ ట్యుటోరియల్ JavaScriptలో ఈవెంట్‌లను రద్దు చేయడానికి వివరించబడింది.