event.preventDefault () එදිරිව

කිසියම් සිදුවීමක් වෙඩි තැබීමෙන් පසු වෙනත් සිදුවීම් හසුරුවන්නන් ක්‍රියාත්මක වීම වැළැක්වීමට මට අවශ්‍ය වූ විට, මට ක්‍රම දෙකෙන් එකක් භාවිතා කළ හැකිය. මම උදාහරණ වල jQuery භාවිතා කරමි, නමුත් මෙය සරල-ජේඑස් සඳහාද අදාළ වේ:

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

$('a').click(function () {
    // custom handling here
    return false;
});

සිදුවීම් ප්‍රචාරණය නැවැත්වීමේ ක්‍රම දෙක අතර සැලකිය යුතු වෙනසක් තිබේද?

මට return false;නම්, ක්‍රමයක් ක්‍රියාත්මක කිරීමට වඩා සරල, කෙටි හා බොහෝ විට අඩු දෝෂ සහිත වේ. ක්රමය සමඟ, ඔබ නිවැරදි ආවරණ, වරහන් ආදිය ගැන මතක තබා ගත යුතුය.

එසේම, මෙම ක්‍රමය ඇමතීමට හැකිවන පරිදි ඇමතුම් ලබා ගැනීමේ පළමු පරාමිතිය නිර්වචනය කළ යුතුය. සමහර විට, මම මේ ආකාරයට කිරීමෙන් වැළකී preventDefaultඒ වෙනුවට භාවිතා කිරීමට හේතු කිහිපයක් තිබේද? වඩා හොඳ ක්‍රමය කුමක්ද?

return falseසිට එය සඟවන්න අවස්ථාවට හසුරුවන්නා තුළ ඵලදායී දෙකම ඉල්ලා හා සමාන වේ e.preventDefaultහා e.stopPropagationසම්මත මත jQuery.Event වස්තුව.

e.preventDefault()සුපුරුදු සිදුවීම සිදුවීම e.stopPropagation()වලක්වනු ඇත, සිදුවීම බුබුලු ගැසීම වලක්වනු ඇති අතර return falseඒ දෙකම කරයි. සටහන මේ හැසිරීම වඩා වෙනස් බව සාමාන්ය වන, විශේෂයෙන්, (නොවන jQuery) උත්සවය අංශය, return falseකරන්නේ නැහැ දක්වා රැව් සිට මෙම අවස්ථාවට නවත්වන්න.

මුලාශ්‍රය: ජෝන් රෙසිග්

Href ක්ලික් කිරීමක් අවලංගු කිරීම සඳහා event.preventDefault () “බොරු ආපසු එවීම” හරහා භාවිතා කිරීමෙන් යම් ප්‍රයෝජනයක් තිබේද?

මගේ අත්දැකීම් අනුව, event.preventDefault () භාවිතා කිරීමේදී අවම වශයෙන් එක් පැහැදිලි වාසියක් ඇත. ඔබ ක්ලික් කිරීමේ සිදුවීම නැංගුරම් ටැගයක් මත ග්‍රහණය කරගනී යැයි සිතමු, එසේ නොමැතිනම් පරිශීලකයා වත්මන් පිටුවෙන් සැරිසැරීමට නම් එය විශාල ගැටළුවක් වනු ඇත. ඔබගේ ක්ලික් හෑන්ඩ්ලර් බ්‍රව්සර් සංචලනය වැළැක්වීම සඳහා ආපසු වැරදි ලෙස භාවිතා කරන්නේ නම්, එය පරිවර්තකයා ආපසු ප්‍රකාශයට නොපැමිණීමේ හැකියාව විවෘත කරන අතර බ්‍රව්සරය නැංගුරම් ටැගයේ පෙරනිමි හැසිරීම ක්‍රියාත්මක කිරීමට ඉදිරියට යයි.

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

Event.preventDefault () භාවිතා කිරීමෙන් ලැබෙන වාසිය නම්, ඔබට මෙය හසුරුවන්නාගේ පළමු පේළිය ලෙස එක් කළ හැකි අතර එමඟින් ශ්‍රිතයේ අවසාන පේළියට ළඟා නොවුනත් නැංගුරමේ පෙරනිමි හැසිරීම ගිනි නොගන්නා බවට සහතික වේ (උදා: ධාවන කාල දෝෂය ).

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

මෙය ඔබ නම් කර ඇති පරිදි "ජාවාස්ක්‍රිප්ට්" ප්‍රශ්නයක් නොවේ; එය jQuery සැලසුම් කිරීම පිළිබඳ ප්‍රශ්නයකි.

jQuery සහ ජෝන් රෙසිග් වෙතින් කලින් සම්බන්ධ කළ උපුටා දැක්වීම ( karim79 ගේ පණිවිඩයේ) ) සාමාන්ය වැඩ කටයුතු කෙසේ අවස්ථාවට පේනු මූලාශ්රය වැරදි වැටහීමක් ඇති බව පෙනේ.

සත්‍යය: ව්‍යාජ ලෙස ආපසු හරවන සිදුවීම් හසුරුවන්නෙකු එම සිදුවීම සඳහා පෙරනිමි ක්‍රියාව වළක්වයි. එය සිදුවීම් ප්‍රචාරණය නතර නොකරයි. නෙට්ස්කේප් නැවිගේටරයේ පැරණි දිනවල සිට සිදුවීම් හසුරුවන්නන් සෑම විටම මේ ආකාරයට ක්‍රියා කර ඇත.

එම්ඩීඑන් හි ප්‍රලේඛනයreturn false සිදුවීම් හසුරුවන්නෙකු ක්‍රියා කරන ආකාරය පැහැදිලි කරයි

JQuery හි සිදුවන්නේ සිදුවීම් හසුරුවන්නන්ට සිදු වන දෙයට සමාන නොවේ. DOM සිදුවීම් අසන්නන් සහ MSIE "අමුණා ඇති" සිදුවීම් සම්පූර්ණයෙන්ම වෙනස් කාරණයකි.

වැඩිදුර කියවීම සඳහා, MSDN සහ W3C DOM 2 Events ප්‍රලේඛනය මත ඇමුණුම් බලන්න .

පොදුවේ ගත් කල, ඔබේ පළමු විකල්පය ( preventDefault()) ගත යුතු එකකි, නමුත් ඔබ සිටින්නේ කුමන සන්දර්භය තුළද සහ ඔබේ අරමුණු මොනවාද යන්න දැන සිටිය යුතුය.

ඔබේ ෙ ත ඉන්ධන විශාල හේතුවක් තිබේ මත ලිපිය return false;එදිරිව event.preventDefault()එදිරිව event.stopPropagation()එදිරිවevent.stopImmediatePropagation() .

JQuery භාවිතා කරන return falseවිට, ඔබ එය අමතන විට වෙනම දේවල් 3 ක් කරයි:

1. event.preventDefault();
2. event.stopPropagation();
3. නැවත ඇමතුම ක්‍රියාත්මක කිරීම නවත්වන අතර ඇමතූ වහාම ආපසු එයි.

JQuery සිදුවීම් බලන්න : වැඩි විස්තර සහ උදාහරණ සඳහා නැවත පැමිණීමේ වැරදි භාවිතා කිරීම නවත්වන්න .

onClickඑක් අංගයක් සඳහා ඔබට සිදුවීම මත බොහෝ කාර්යයන් එල්ලිය හැකිය . falseවෙඩි තැබීම අවසන් වරට සිදුවනු ඇතැයි ඔබට සහතික විය හැක්කේ කෙසේද ? preventDefaultඅනෙක් අතට නියත වශයෙන්ම මූලද්‍රව්‍යයේ පෙරනිමි හැසිරීම පමණක් වළක්වනු ඇත.

මම සිතනවා

event.preventDefault()

සිදුවීම් අවලංගු කිරීමේ w3c නිශ්චිත ක්‍රමය වේ.

සිදුවීම් අවලංගු කිරීම පිළිබඳ W3C පිරිවිතරයෙන් ඔබට මෙය කියවිය හැකිය .

සෑම තත්වයකදීම ඔබට ආපසු වැරදි ලෙස භාවිතා කළ නොහැක. Href ගුණාංගය තුළ javascript ශ්‍රිතයක් ලබා දෙන විට සහ ඔබ වැරදියට ආපසු එවන්නේ නම් පරිශීලකයා ව්‍යාජ වචන ලියා ඇති පිටුවකට හරවා යවනු ලැබේ.

මම හිතන්නේ මෙය කිරීමට හොඳම ක්‍රමය භාවිතා කිරීම event.preventDefault()නිසා හසුරුවන්නා තුළ යම් ව්‍යතිරේකයක් මතු වුවහොත් ආපසු falseප්‍රකාශය මඟ හැරෙන අතර හැසිරීම ඔබට අවශ්‍ය දේට ප්‍රතිවිරුද්ධ වනු ඇත.

නමුත් කේතය කිසිදු ව්‍යතිරේකයක් අවුලුවන්නේ නැති බව ඔබට විශ්වාස නම්, එවිට ඔබට අවශ්‍ය ඕනෑම ක්‍රමයක් සමඟ යා හැකිය.

ඔබට තවමත් නැවත පැමිණීම සමඟ යාමට අවශ්‍ය නම් false, එවිට ඔබට ඔබගේ සම්පූර්ණ හසුරුවන කේතය පහත පරිදි උත්සාහක ඇල්ලීමේ කොටසකට දැමිය හැකිය:

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

මගේ අත්දැකීම් වලින් මගේ මතය, සෑම විටම භාවිතා කිරීම වඩා හොඳ බව

event.preventDefault() 

ප්‍රායෝගිකව ඉදිරිපත් කිරීම නැවැත්වීමට හෝ වළක්වා ගැනීමට, අපට අවශ්‍ය විටෙක return false event.preventDefault()හොඳින් වැඩ කරනවාට වඩා .

return falseසහ අතර ඇති ප්‍රධාන වෙනස event.preventDefault()වන්නේ පහත දැක්වෙන ඔබේ කේතය return falseක්‍රියාත්මක නොවීමයිevent.preventDefault() එහිදී ඔබගේ කේතය මෙම ප්රකාශය පසු ක්රියාත්මක වනු ඇත.

ඔබ ආපසු වැරදි ලෙස ලියන විට එය තිරය පිටුපස ඔබ වෙනුවෙන් පහත සඳහන් දේ කරයි.

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

e.preventDefault ();

එය හුදෙක් මූලද්‍රව්‍යයක පෙරනිමි ක්‍රියාව නතර කරයි.

උදාහරණ උදා: -

URL එක අනුගමනය කිරීමෙන් හයිපර්ලින්ක් වළක්වයි, පෝරමය ඉදිරිපත් කිරීම සඳහා ඉදිරිපත් කිරීමේ බොත්තම වළක්වයි. ඔබට බොහෝ සිදුවීම් හසුරුවන්නන් සිටින විට සහ ඔබට පෙරනිමි සිදුවීම බොහෝ වාර ගණනක් සිදුවීම වැළැක්වීමට අවශ්‍ය වන අතර, ඒ සඳහා අපි ශ්‍රිතයේ ඉහළින්ම භාවිතා කළ යුතුය ().

හේතුව:-

භාවිතා කිරීමට හේතුව e.preventDefault();අපගේ කේතයේ යම්කිසි වැරැද්දක් සිදුවුවහොත් එය සබැඳිය හෝ පෝරමය ක්‍රියාත්මක කිරීමට ඉඩ ලබා දීම හෝ ඉදිරිපත් කිරීමට හෝ ඔබට කිරීමට අවශ්‍ය ඕනෑම ක්‍රියාවක් ක්‍රියාත්මක කිරීමට හෝ ඉඩ දීමට ඉඩ සලසයි. & සම්බන්ධ කිරීම හෝ ඉදිරිපත් කිරීම බොත්තම ඉදිරිපත් කරනු ඇති අතර සිදුවීම තවදුරටත් ප්‍රචාරය කිරීමට ඉඩ ලබා දේ.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

ආපසු බොරු;

එය හුදෙක් ශ්‍රිතය () ක්‍රියාත්මක කිරීම නවත්වයි.

" return false;" ක්රියාවලිය මුළු ක්රියාත්මක අවසන් වේ.

හේතුව:-

ආපසු වැරදි ලෙස භාවිතා කිරීමට හේතුව; ශ්‍රිතය තවදුරටත් දැඩි ලෙස ක්‍රියාත්මක කිරීමට ඔබට අවශ්‍ය නැති බව ය.

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

මූලික වශයෙන්, මේ ආකාරයට ඔබ දේවල් ඒකාබද්ධ කරන්නේ jQuery යනු බොහෝ දුරට HTML මූලද්‍රව්‍යයන් කෙරෙහි අවධානය යොමු කරන රාමුවක් වන නිසා, ඔබ මූලික වශයෙන් පෙරනිමිය වළක්වයි, නමුත් ඒ සමඟම, ඔබ ප්‍රචාරණය නවත්වයි.

එබැවින් අපට සරලව කිව හැකිය, සාවද්‍ය ලෙස ආපසු පැමිණීම jQueryසමාන වේ:

වැරදි ලෙස ආපසු එවීම e.preventDefault සහ e.stopPropagation වේ

නමුත් එය සියල්ලම jQuery හෝ DOM ආශ්‍රිත කාර්යයන් තුළ ඇති බව අමතක නොකරන්න, ඔබ එය මූලද්‍රව්‍යය මත ක්‍රියාත්මක කරන විට, මූලික වශයෙන්, එය සිදුවීමෙහි පෙරනිමි හැසිරීම සහ ප්‍රචාරණය ඇතුළුව සියල්ල වෙඩි තැබීමෙන් වළක්වයි.

මූලික වශයෙන් භාවිතා කිරීමට පෙර return false;, මුලින්ම කුමක් කළ යුතුද e.preventDefault();සහ e.stopPropagation();කුමක් කළ යුතුද යන්න තේරුම් ගන්න , එවිට ඔබට දෙකම එකවර අවශ්‍ය යැයි ඔබ සිතන්නේ නම් එය භාවිතා කරන්න.

එබැවින් මූලික වශයෙන් මෙම කේතය පහත:

$('div').click(function () {
  return false;
});

වන සමාන මෙම කේතය කිරීමට:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});

මගේ අත්දැකීම් සිද්ධියෙන්. StopPropagation () වැඩිපුරම භාවිතා කරනුයේ CSS ආචරණය හෝ සජීවිකරණ වැඩ වලදීය, උදාහරණයක් ලෙස ඔබට කාඩ් සහ බොත්තම් මූලද්‍රව්‍ය යන දෙකටම හෝවර් බලපෑමක් ඇති විට, ඔබ බොත්තම මත සැරිසරන විට කාඩ් සහ බොත්තම් දෙකම හෝවර් ආචරණය මෙම අවස්ථාවේදී අවුලුවනු ඇත. , ඔබට event.stopPropagation () බුබුලු ක්‍රියා නතර කළ හැකි අතර event.preventDefault () යනු බ්‍රව්සර් ක්‍රියාවන්ගේ පෙරනිමි හැසිරීම වැළැක්වීම සඳහා ය. නිදසුනක් ලෙස, ඔබට පෝරමයක් ඇති නමුත් ඉදිරිපත් කිරීමේ ක්‍රියාව සඳහා ක්ලික් කිරීමේ සිදුවීම පමණක් ඔබ අර්ථ දක්වා ඇත, පරිශීලකයා එන්ටර් එබීමෙන් පෝරමය ඉදිරිපත් කරන්නේ නම්, බ්‍රව්සරය යතුරු එබීමෙන් අවුලුවන ලදි, ඔබේ ක්ලික් කිරීමේ සිදුවීම නොව මෙහිදී ඔබ භාවිතා කළ යුත්තේ event.preventDefault () නුසුදුසු වළක්වා ගැනීමට ය හැසිරීම. අපායක් යනු කුමක්දැයි මම නොදනිමි. කණගාටුයි. වැඩි පැහැදිලි කිරීමක් සඳහා මෙම සබැඳිය වෙත ගොස් # 33 පේළිය සමඟ සෙල්ලම් කරන්නhttps://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv