ජාවාස්ක්‍රිප්ට් සබැඳි, “#” හෝ “ජාවාස්ක්‍රිප්ට්: අවලංගු (0)” සඳහා මා භාවිතා කළ යුත්තේ කුමන “href” අගයද?

පහත දැක්වෙන්නේ ජාවාස්ක්‍රිප්ට් කේතය ක්‍රියාත්මක කිරීමේ එකම අරමුණ ඇති සබැඳියක් තැනීමේ ක්‍රම දෙකකි. ක්‍රියාකාරීත්වය, පිටු පැටවීමේ වේගය, වලංගු කිරීමේ අරමුණු යනාදිය අනුව වඩා හොඳ කුමක්ද?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

හෝ

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

මම පාවිච්චි කරනවා javascript:void(0).

හේතු තුනක්. #සංවර්ධකයින් කණ්ඩායමක් අතර භාවිතය දිරිගැන්වීම නොවැළැක්විය හැකි ලෙස සමහරු මෙවැනි ශ්‍රිතයක ප්‍රතිලාභ අගය භාවිතා කිරීමට හේතු වේ:

function doSomething() {
    //Some code
    return false;
}

නමුත් පසුව ඔවුන් return doSomething()ඔන්ක්ලික් භාවිතා කිරීමට අමතක කර භාවිතා කරන්න doSomething().

මග හැරීමට දෙවන හේතුව නම්, කැඳවන ලද ශ්‍රිතයේ දෝෂයක් ඇති වුවහොත් #අවසාන return false;ක්‍රියාව ක්‍රියාත්මක නොවේ. එබැවින් සංවර්ධකයින් විසින් හැඳින්වෙන ශ්‍රිතයේ කිසියම් දෝෂයක් නිසි ලෙස හැසිරවීමට මතක තබා ගත යුතුය.

තුන්වන හේතුව නම් onclickසිදුවීම් දේපල ගතිකව පවරා ඇති අවස්ථා තිබීමයි. එක් ඇමුණුම් ක්‍රමයක් හෝ වෙනත් ක්‍රමයක් සඳහා ශ්‍රිතය කේත කිරීමකින් තොරව ශ්‍රිතයක් ඇමතීමට හෝ ගතිකව පැවරීමට මම කැමැත්තෙමි. එබැවින් onclickHTML සලකුණු වල මගේ (හෝ ඕනෑම දෙයක්) මේ වගේ ය:

onclick="someFunc.call(this)"

හෝ

onclick="someFunc.apply(this, arguments)"

භාවිතා javascript:void(0)කිරීමෙන් ඉහත සඳහන් සියලු හිසරදය මඟහරවා ගත හැකි අතර, අවාසිය පිළිබඳ උදාහරණ කිසිවක් මට හමු නොවීය.

එබැවින් ඔබ හුදකලා සංවර්ධකයෙකු නම් ඔබට පැහැදිලිවම ඔබේ තේරීම කළ හැකිය, නමුත් ඔබ කණ්ඩායමක් ලෙස වැඩ කරන්නේ නම් ඔබට එක්කෝ සඳහන් කළ යුතුය:

භාවිතා කරන්න href="#", onclickසෑම විටම return false;අවසානයේ අඩංගු වන බවට වග බලා ගන්න , ඕනෑම කැඳවුම් ශ්‍රිතයක් දෝෂයක් නොදක්වන බවත්, ඔබ ශ්‍රිතයක් ගතිකව onclickදේපල සමඟ සම්බන්ධ කරන්නේ නම් එය නැවත දෝෂයක් නොදක්වන බවට වග බලා ගන්න false.

හෝ

භාවිත href="javascript:void(0)"

දෙවැන්න පැහැදිලිවම සන්නිවේදනය කිරීමට වඩා පහසු ය.

එසේ නොවේ.

ඔබට සත්‍ය URL එකක් තිබිය හැකි නම් එය HREF ලෙස භාවිතා කරන්න. අළුත් ටැබ් එකක් විවෘත කිරීමට යමෙකු ඔබගේ සබැඳිය මත ක්ලික් කළහොත් හෝ ඔවුන් ජාවාස්ක්‍රිප්ට් අක්‍රීය කර ඇත්නම් ඔන්ක්ලික් ක්ලික් නොකරයි.

එය කළ නොහැකි නම්, ඔබ අවම වශයෙන් ජාවාස්ක්‍රිප්ට් සහ සුදුසු ක්ලික් සිදුවීම් හසුරුවන්නන් සමඟ ලේඛනයට නැංගුරම් ටැගය එන්නත් කළ යුතුය.

මෙය සැමවිටම කළ නොහැකි බව මම තේරුම් ගතිමි, නමුත් මගේ මතය අනුව ඕනෑම පොදු වෙබ් අඩවියක් සංවර්ධනය කිරීමේදී එය උත්සාහ කළ යුතුය.

පරීක්ෂා කරන්න වන්නේ පැතලි JavaScript හා ප්රගතිශීලී වැඩි දියුණු (දෙකම විකිපීඩියා, නිදහස් විශ්වකෝෂය).

කරන්නේ <a href="#" onclick="myJsFunc();">Link</a>හෝ <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>හෝ වෙන ඕනෑම දෙයක් සඳහා අඩංගු onclickවිශේෂණය - දැන් එය නරක පුරුද්දක් විය හැකි නමුත්, වසර පහකට පෙර, හරිද ආපසු විය. මෙන්න හේතුව:

1. එය බාධාකාරී ජාවාස්ක්‍රිප්ට් භාවිතය ප්‍රවර්ධනය කරයි - එය නඩත්තු කිරීමට අපහසු සහ පරිමාණය කිරීමට අපහසු වී ඇත. Unobtrusive JavaScript හි මේ පිළිබඳ වැඩි විස්තර .

2. ඔබ ඔබේ කාලය ගත කරන්නේ ඇදහිය නොහැකි තරම් ඕනෑවට වඩා වාචික කේතයක් ලිවීමටයි - එය ඔබගේ කේත පදනමට ඉතා අල්පය (ඇත්නම්).

3. අපේක්ෂිත ප්‍රති .ලය ලබා ගැනීම සඳහා වඩා හොඳ, පහසු සහ වඩා නඩත්තු කළ හැකි සහ පරිමාණය කළ හැකි ක්‍රම දැන් තිබේ.

බාධා රහිත ජාවාස්ක්‍රිප්ට් ක්‍රමය

කිසිසේත්ම hrefලක්ෂණයක් නැත ! ඕනෑම හොඳ CSS යළි පිහිටුවීමක් අස්ථානගත වූ පෙරනිමි කර්සර විලාසය ගැන සැලකිලිමත් වනු ඇත, එබැවින් එය ගැටළුවක් නොවේ. ඉන්පසු ඔබේ ජාවාස්ක්‍රිප්ට් ක්‍රියාකාරිත්වය ඔබේ සලකුණු කිරීම වෙනුවට ජාවාස්ක්‍රිප්ට් තර්කනය ජාවාස්ක්‍රිප්ට් තුළ රැඳී ඇති බැවින් වඩාත් නඩත්තු කළ හැකි අලංකාර සහ බාධා රහිත හොඳම භාවිතයන් භාවිතා කරන්න - ඔබේ තර්කනය බෙදීමට අවශ්‍ය මහා පරිමාණ ජාවාස්ක්‍රිප්ට් යෙදුම් සංවර්ධනය කිරීමට පටන් ගන්නා විට එය අත්‍යවශ්‍ය වේ. බ්ලැක් බොක්ස් සංරචක සහ සැකිලි. මහා පරිමාණ ජාවාස්ක්‍රිප්ට් යෙදුම් ගෘහ නිර්මාණ ශිල්පයෙහි මේ පිළිබඳ වැඩි විස්තර

සරල කේත උදාහරණය

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

බ්ලැක්බොක්ස් කළ Backbone.js උදාහරණයක්

පරිමාණය කළ හැකි, කළු කොටු කළ, Backbone.js සංරචක උදාහරණය සඳහා - මෙම වැඩ කරන jsfiddle උදාහරණය මෙතැනින් බලන්න . අපි නොවරදින ජාවාස්ක්‍රිප්ට් භාවිතයන් භාවිතා කරන ආකාරය සැලකිල්ලට ගන්න, සහ ඉතා සුළු කේතයක විවිධ සංරචක අවස්ථා අතර අතුරු ආබාධ හෝ ගැටුම් වලින් තොරව පිටුව පුරා කිහිප වතාවක් පුනරාවර්තනය කළ හැකි සංරචකයක් ඇත. පුදුම!

සටහන්

• මූලද්රව්යයේ hrefගුණාංගය ඉවත් aකිරීමෙන් tabප්රධාන සංචාලනය භාවිතයෙන් මූලද්රව්යයට ප්රවේශ විය නොහැක . tabයතුර හරහා එම මූලද්‍රව්‍යයන්ට ප්‍රවේශ වීමට ඔබ කැමති නම් , ඔබට tabindexගුණාංගය සැකසිය හැකිය , නැතහොත් buttonඒ වෙනුවට මූලද්‍රව්‍ය භාවිතා කළ හැකිය. ට්රැකර් 1 හි පිළිතුරේ සඳහන් පරිදි සාමාන්‍ය සබැඳි මෙන් ඔබට පහසුවෙන් බොත්තම් අංග මෝස්තර කළ හැකිය .

• මූලද්රව්යයේ ඇති hrefගුණාංගය ඉවත් කිරීමෙන් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 මෝස්තරය නොකිරීමට හේතු වනු ඇත , ඒ නිසා අපි ඒ වෙනුවට මෙය ඉටු කිරීම සඳහා සරල ජාවාස්ක්‍රිප්ට් ෂිම් එකක් එකතු කර ඇත්තෙමු . එය කමක් නැත, ඔබට href ගුණාංගයක් නොමැති නම් සහ සුන්දර පරිහානියක් නොමැති නම් ඔබේ සබැඳිය කෙසේ හෝ ක්‍රියා නොකරනු ඇත - තවද ඔබට කරදර වීමට විශාල ගැටළු ඇත.aa:hovera.hover

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

'#'පරිශීලකයා නැවත පිටුවේ ඉහළට ගෙන යනු ඇත, එබැවින් මම සාමාන්‍යයෙන් යන්නෙමි void(0).

javascript:; එසේම හැසිරේ javascript:void(0);

මම අවංකවම යෝජනා කරන්නේ නැහැ. <button></button>එම හැසිරීම සඳහා මම ශෛලීගත ලෙස භාවිතා කරමි .

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

මේ ආකාරයෙන් ඔබට ඔබේ ඔන්ක්ලික් එක පැවරිය හැකිය. onclickමූලද්‍රව්‍ය ටැගයේ ඇති ගුණාංගය භාවිතා නොකොට ස්ක්‍රිප්ට් හරහා බැඳීමට මම යෝජනා කරමි . අක්‍රීය කළ නොහැකි පැරණි IE වල ඇති psuedo 3d පෙළ ආචරණය එකම ගොචා වේ.

ඔබ නම් යුතුය භාවිතයට ඒ අංගයක් භාවිතා කරන්න, javascript:void(0);දැනටමත් සඳහන් හේතු නිසා.

• ඔබගේ ඔන්ක්ලික් සිදුවීම අසමත් වුවහොත් සැමවිටම බාධා ඇති වේ.
• වැරදි පැටවුම් ඇමතුම් සිදු නොවනු ඇත, හෝ හැෂ් වෙනසක් මත පදනම්ව වෙනත් සිදුවීම් අවුලුවනු ඇත
• හැෂ් ටැගය ක්ලික් කිරීම (ඔන්ක්ලික් විසි කිරීම්) හරහා වැටුණහොත් අනපේක්ෂිත ලෙස හැසිරීමට හේතු විය හැක, එය සුදුසු වැටීමක් හරහා හැසිරීමක් හැර එය වළක්වා ගන්න, ඔබට සංචාලන ඉතිහාසය වෙනස් කිරීමට අවශ්‍යය.

සටහන: ක්ලික් කිරීම ඇත්ත වශයෙන්ම කරන්නේ කුමක්ද යන්න පෙන්වන අතිරේක දර්ශකයක් ලෙස සේවය කළ හැකි 0නූලක් ඔබට ආදේශ කළ හැකිය javascript:void('Delete record 123').

පළමුවැන්න, පරිශීලකයා ජාවාස්ක්‍රිප්ට් අක්‍රීය කර ඇත්නම් සැබෑ සබැඳියක් අනුගමනය කිරීමයි. ජාවාස්ක්‍රිප්ට් ක්‍රියාත්මක වුවහොත් ක්ලික් කිරීමේ සිදුවීම වෙඩි තැබීම වලක්වා ගැනීම සඳහා අසත්‍යය නැවත ලබා දීමට වග බලා ගන්න.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

ඔබ Angular2 භාවිතා කරන්නේ නම්, මේ ආකාරයෙන් ක්‍රියා කරයි:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

මෙතැනින් බලන්න https://stackoverflow.com/a/45465728/2803344

ඔබ මගෙන් ඇසුවොත්;

ජාවාස්ක්‍රිප්ට් කේතයක් ධාවනය කිරීමේ එකම අරමුණ ඔබේ "සබැඳියට" තිබේ නම් එය සබැඳියක් ලෙස සුදුසුකම් නොලබයි; ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක් සමඟ පෙළ කැබැල්ලක් එයට සම්බන්ධ කර ඇත. සබැඳියක් අනුකරණය කිරීම සඳහා <span>ටැග් එකක් onclick handlerඅමුණා ඇති අතර මූලික CSS කිහිපයක් භාවිතා කිරීමට මම නිර්දේශ කරමි . සබැඳි සැරිසැරීම සඳහා සාදා ඇති අතර, ඔබේ ජාවාස්ක්‍රිප්ට් කේතය සංචාලනය සඳහා නොවේ නම් එය <a>ටැගයක් නොවිය යුතුය .

උදාහරණයක්:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

ඉතා මැනවින් ඔබ මෙය කරනු ඇත:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

නැතහොත්, ඊටත් වඩා හොඳ නම්, ඔබට HTML හි පෙරනිමි ක්‍රියා සබැඳිය ඇති අතර, DOM විදැහුම් කිරීමෙන් පසුව ඔබ ජාවාස්ක්‍රිප්ට් හරහා බාධාවකින් තොරව මූලද්‍රව්‍යයට ඔන්ක්ලික් සිද්ධිය එක් කරනු ඇත, එමඟින් ජාවාස්ක්‍රිප්ට් නොමැති නම් / ප්‍රයෝජනයට නොගන්නේ නම් වැඩකට නැති සිදුවීම් හසුරුවන්නන් ඔබේ කේතය ප්‍රහේලිකාවක් කර ඔබේ සත්‍ය අන්තර්ගතය අපැහැදිලි කිරීමට (හෝ අවම වශයෙන් අවධානය වෙනතකට යොමු කිරීමට) ඉඩ තිබේ.

හුදෙක් භාවිතා කිරීම #විහිලු සහගත චලනයන් සිදු කරයි, එබැවින් #selfඔබ යතුරු ලියනය කිරීමේ උත්සාහයන් ඉතිරි කර ගැනීමට කැමති නම් භාවිතා කිරීමට මම නිර්දේශ කරමි JavaScript bla, bla,.

මම පහත සඳහන් දෑ භාවිතා කරමි

<a href="javascript:;" onclick="myJsFunc();">Link</a>

වෙනුවට

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

ඔබ සාමාන්‍ය URL hrefආරෝපණයක භාවිතා කළ යුතු යැයි සඳහන් වෙනත් තැනක යෝජනා සමඟ මම එකඟ වෙමි , ඉන්පසු ඔන්ක්ලික් හි ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක් අමතන්න. දෝෂය නම්, ඔවුන් return falseඇමතුමෙන් පසුව ස්වයංක්‍රීයව එකතු කිරීමයි.

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

ඉතා සරල විසඳුමක් තිබේ. trueඑය නිවැරදිව ක්‍රියාත්මක වන්නේ නම් ශ්‍රිතය නැවත පැමිණීමට ඉඩ දෙන්න . ක්ලික් කිරීම අවලංගු කළ යුතුද නැද්ද යන්න තීරණය කිරීම සඳහා ආපසු ලබා දුන් අගය භාවිතා කරන්න:

ජාවාස්ක්‍රිප්ට්

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

සටහන, මම doSomething()ශ්‍රිතයේ ප්‍රති result ලය ප්‍රතික්ෂේප කරන බව . එය ක්‍රියාත්මක වන්නේ නම්, එය නැවත පැමිණෙනු ඇත true, එබැවින් එය ප්‍රතික්ෂේප කරනු ලැබේ ( false) සහ path/to/some/URLකැමැත්ත කැඳවනු නොලැබේ. මෙම උත්සවයට ආපසු නම් false, (උදාහරණයක් ලෙස, බ්රව්සරය සහාය නැති උත්සවය හෝ වෙන කිසිම දෙයක් තුල භාවිතා යමක් වැරදි ගියහොත්), ඒ සඳහා බොහෝ දුරට නිශේධනය කරයි trueසහ path/to/some/URLහැඳින්වේ.

#වඩා හොඳයි javascript:anything, නමුත් පහත සඳහන් දේ ඊටත් වඩා හොඳයි:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

ඔබ සැමවිටම උත්සාහ කළ යුත්තේ සුන්දර පරිහානිය සඳහා ය (පරිශීලකයාට ජාවාස්ක්‍රිප්ට් සක්‍රීය කර නොමැති අවස්ථාවක ... සහ එය පිරිවිතර හා අයවැය සමඟ ඇති විට). එසේම, ජාවාස්ක්‍රිප්ට් ගුණාංග සහ ප්‍රොටෝකෝලය කෙලින්ම HTML හි භාවිතා කිරීම නරක ආකාරයක් ලෙස සැලකේ.

<button>ඒ වෙනුවට මූලද්‍රව්‍යයක් භාවිතා කිරීම මම නිර්දේශ කරමි , විශේෂයෙන් පාලනය මඟින් දත්තවල වෙනසක් ඇති කරයි. (POST වැනි දෙයක්.)

ප්‍රගතිශීලී වර්ධනයක් වන මූලද්‍රව්‍යයන් බාධාවකින් තොරව එන්නත් කළහොත් එය වඩාත් හොඳය. ( මෙම අදහස බලන්න .)

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

නිසැකවම හැෂ් ( #) වඩා හොඳ වන්නේ ජාවාස්ක්‍රිප්ට්හි එය ව්‍යාජ ආකෘතියක් වන බැවිනි:

1. ඉතිහාසය දූෂණය කරයි
2. එන්ජිමේ නව පිටපතක් ස්ථාපනය කරයි
3. ගෝලීය විෂය පථය තුළ ක්‍රියාත්මක වන අතර සිදුවීම් පද්ධතියට ගරු නොකරයි.

පෙරනිමි ක්‍රියාව වළක්වන ඔන්ක්ලික් හෑන්ඩ්ලර් සමඟ ඇත්ත වශයෙන්ම "#" වඩා හොඳය. එපමණක් නොව, ජාවාස්ක්‍රිප්ට් ධාවනය කිරීමේ එකම අරමුණ ඇති සබැඳියක් ඇත්ත වශයෙන්ම “සබැඳියක්” නොවේ. ඔබට සරලවම ස්ටයිල් ෂීට් සමඟ සම්බන්ධ වීමේ පෙනුම හා හැඟීම අනුකරණය කළ හැකි අතර href ගැන කිසිසේත් අමතක කළ හැකිය.

ඊට අමතරව, කව්ගොඩ්ගේ යෝජනාව සම්බන්ධයෙන්, විශේෂයෙන් මෙය: ...href="javascript_required.html" onclick="...මෙය හොඳ ප්‍රවේශයකි, නමුත් එය “ජාවාස්ක්‍රිප්ට් අක්‍රීය” සහ “ඔන්ක්ලික් අසමත්” අවස්ථා අතර වෙනස හඳුනා නොගනී.

මම සාමාන්‍යයෙන් යන්නම්

<a href="javascript:;" onclick="yourFunction()">Link description</a>

එය ජාවාස්ක්‍රිප්ටයට වඩා කෙටි ය: අවලංගු (0) සහ එයම කරයි.

මම භාවිතා කරන්නේ:

<a href="#" onclick="myJsFunc();return false;">Link</a>

හේතු:

1. මෙය hrefසරල, සෙවුම් යන්ත්‍රවලට අවශ්‍ය වේ. ඔබ වෙනත් දෙයක් භාවිතා කරන්නේ නම් (නූලක් වැනි), එය 404 not foundදෝෂයක් ඇති විය හැක .
2. මූසිකය සබැඳිය පුරා සැරිසරන විට, එය ස්ක්‍රිප්ට් එකක් බව නොපෙන්වයි.
3. භාවිතා කිරීමෙන් return false;, පිටුව ඉහළට පනින්න හෝ backබොත්තම කැඩෙන්නේ නැත.

මම භාවිතය තෝරාගත්තෙමි javascript:void(0), මන්ද මෙය භාවිතා කිරීමෙන් අන්තර්ගත මෙනුව විවෘත කිරීම සඳහා දකුණු ක්ලික් කිරීම වළක්වා ගත හැකිය. නමුත් javascript:;කෙටි වන අතර එකම දේ කරයි.

එබැවින්, ඔබ <a />ටැගයක් සමඟ ජාවාස්ක්‍රිප්ට් දේවල් කරන විට සහ ඔබ එය දැමුවහොත් href="#", ඔබට සිදුවීම අවසානයේ (පේළිගත සිදුවීම් බන්ධනයකදී) වැනි ව්‍යාජ එකතු කළ හැකිය :

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

නැතහොත් ඔබට JavaScript සමඟ href ගුණාංගය වෙනස් කළ හැකිය :

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

හෝ

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

නමුත් අර්ථාන්විතව, මෙය සාක්ෂාත් කර ගැනීම සඳහා ඉහත සඳහන් සියලු ක්‍රම වැරදිය. (එය හොඳින් ක්‍රියාත්මක වුවද) . පිටුව සැරිසැරීම සඳහා කිසියම් මූලද්‍රව්‍යයක් නිර්මාණය කර නොමැති නම් සහ ඒ හා සම්බන්ධ සමහර ජාවාස්ක්‍රිප්ට් දේවල් තිබේ නම්, එය <a>ටැගයක් නොවිය යුතුය .

ඔබට <button />අවශ්‍ය පරිදි දේවල් කිරීමට හෝ b, span හෝ ඔබේ අවශ්‍යතාවයට සරිලන වෙනත් ඕනෑම අංගයක් භාවිතා කළ හැකිය , මන්ද ඔබට සියලු අංග මත සිදුවීම් එක් කිරීමට අවසර ඇත.

එබැවින්, භාවිතා කිරීමට එක් වාසියක් ඇත <a href="#">. ඔබ කර්සරය දර්ශකය පෙරනිමියෙන් එම මූලද්‍රව්‍යය මත ලබා ගනී a href="#". ඒ සඳහා, ඔබට cursor:pointer;මෙම ගැටළුව විසඳන මේ සඳහා CSS භාවිතා කළ හැකි යැයි මම සිතමි .

අවසානයේදී, ඔබ ජාවාස්ක්‍රිප්ට් කේතයෙන්ම සිදුවීම බැඳ තබන්නේ event.preventDefault()නම්, ඔබ <a>ටැගය භාවිතා කරන්නේ නම් මෙය සාක්ෂාත් කර ගැනීම සඳහා ඔබට කළ හැකිය , නමුත් ඔබ මේ සඳහා <a>ටැගයක් භාවිතා නොකරන්නේ නම් , එහිදී ඔබට වාසියක් ලැබෙනු ඇත. මෙය කිරීමට අවශ්‍ය නැත.

ඉතින්, ඔබ දුටුවහොත්, මේ ආකාරයේ දේවල් සඳහා ටැගයක් භාවිතා නොකිරීම වඩා හොඳය.

ජාවාස්ක්‍රිප්ට් ධාවනය කිරීමේ එකම අරමුණ සඳහා සබැඳි භාවිතා නොකරන්න.

H href = "#" භාවිතය පිටුව ඉහළට අනුචලනය කරයි; අවලංගු (0) භාවිතය බ්‍රව්සරය තුළ නාවික ගැටලු ඇති කරයි.

ඒ වෙනුවට, සබැඳියක් හැර වෙනත් අංගයක් භාවිතා කරන්න:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

CSS සමඟ එය මෝස්තර කරන්න:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

JQuery භාවිතා කිරීම වඩා හොඳය,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

හා පළමුෙවන් දෙකම href="#"හා href="javascript:void(0)".

නැංගුරම් ටැග් සලකුණු කිරීම සමාන වනු ඇත

<a onclick="hello()">Hello</a>

සරලයි!

ඔබ AngularJS භාවිතා කරන්නේ නම් , ඔබට පහත සඳහන් දෑ භාවිතා කළ හැකිය:

<a href="">Do some fancy JavaScript</a>

කිසිවක් නොකරනු ඇත.

අතිරෙකව

• (#) මෙන් එය ඔබව පිටුවේ ඉහළට ගෙන යන්නේ නැත
  • එමනිසා, ඔබට පැහැදිලිවම falseජාවාස්ක්‍රිප්ට් සමඟ ආපසු යාමට අවශ්‍ය නැත
• එය කෙටි සංක්ෂිප්තයකි

නොමැති නම් hrefසමහර විට නැංගුරමක් ටැගය භාවිතා කිරීමට හේතුවක් නැත.

සෑම අංගයකම පාහේ ඔබට සිදුවීම් (ක්ලික් කරන්න, සැරිසැරීම ආදිය) ඇමිණිය හැකිය, එබැවින් හුදෙක් a spanහෝ a භාවිතා නොකරන්නේ ඇයි div?

ජාවාස්ක්‍රිප්ට් අක්‍රීය පරිශීලකයින් සඳහා: පසුබෑමක් නොමැති නම් (නිදසුනක් ලෙස, විකල්පයක් href), අවම වශයෙන් එම මූලද්‍රව්‍යය <a>හෝ <span>ටැගය කුමක් වුවත් දැකීමට හා ඒවාට මැදිහත් වීමට ඔවුන්ට නොහැකි විය යුතුය .

සාමාන්‍යයෙන්, ජාවාස්ක්‍රිප්ට් අක්‍රීය කර ඇති සේවාදායකයින්ට තවමත් යම් ක්‍රියාකාරීත්වයක් ඇති බව තහවුරු කර ගැනීම සඳහා ඔබට සැමවිටම පසුබැසීමේ සබැඳියක් තිබිය යුතුය. මෙම සංකල්පය unobtrusive JavaScript ලෙස හැඳින්වේ.

උදාහරණය ... ඔබට පහත සෙවුම් සබැඳිය ඇති බව කියමු:

<a href="search.php" id="searchLink">Search</a>

ඔබට සැමවිටම පහත සඳහන් දෑ කළ හැකිය:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

ඒ ආකාරයෙන්, ජාවාස්ක්‍රිප්ට් ආබාධිත පුද්ගලයින් වෙත යොමු කරනු ලබන search.phpඅතර ජාවාස්ක්‍රිප්ට් සමඟ ඔබේ නරඹන්නන් ඔබේ වැඩිදියුණු කළ ක්‍රියාකාරිත්වය දෙස බලයි.

මම පෞද්ගලිකව ඒවා ඒකාබද්ධව භාවිතා කරමි. උදාහරණයක් වශයෙන්:

HTML

<a href="#">Link</a>

jQuery ටිකක් සමඟ

$('a[href="#"]').attr('href','javascript:void(0);');

හෝ

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

නමුත් මම එය භාවිතා කරන්නේ පරිශීලකයා හිස් නැංගුරමක් මත ක්ලික් කළ විට පිටුව ඉහළට පැනීම වැළැක්වීම සඳහා ය. මම onHTML හි කෙලින්ම onClick සහ වෙනත් සිදුවීම් භාවිතා කරන්නේ කලාතුරකිනි .

මගේ යෝජනාව වනුයේ නැංගුරම වෙනුවට ගුණාංගය <span>සමඟ මූලද්‍රව්‍යය භාවිතා classකිරීමයි. උදාහරණයක් වශයෙන්:

<span class="link">Link</span>

ඉන්පසු .linkශරීරය තුළ ඔතා ඇති ස්ක්‍රිප්ට් එකකින් සහ ටැගයට පෙර </body>හෝ බාහිර ජාවාස්ක්‍රිප්ට් ලේඛනයකින් ශ්‍රිතය පවරන්න .

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* සටහන: ගතිකව සාදන ලද මූලද්‍රව්‍ය සඳහා, භාවිතා කරන්න:

$('.link').on('click', function() {
    // do something
});

ගතිකව සාදන ලද මූලද්‍රව්‍ය සමඟ සාදන ලද ගතිකව සාදන ලද මූලද්‍රව්‍ය සඳහා, භාවිතා කරන්න:

$(document).on('click','.link', function() {
    // do something
});

එවිට ඔබට කුඩා CSS සහිත නැංගුරමක් මෙන් පෙනෙන පරිදි span මූලද්‍රව්‍යය මෝස්තර කළ හැකිය:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

ඉහත සඳහන් කළ jsFiddle උදාහරණයක් මෙන්න .

ඔබට ඉටු කර ගැනීමට අවශ්‍ය දේ මත පදනම්ව, ඔබට ඔන්ක්ලික් අමතක කර href භාවිතා කළ හැකිය:

<a href="javascript:myJsFunc()">Link Text</a>

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

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

අවසාන වශයෙන්, ඔබට javascript:void(0)කිසිවෙකු කොහේවත් යාමට අකමැති නම් සහ ඔබට ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක් ඇමතීමට අවශ්‍ය නැතිනම් ඔබට භාවිතා කළ හැකිය . ඔබට මවුස් ඕවර් සිදුවීමක් සිදුවීමට අවශ්‍ය රූපයක් තිබේ නම් එය විශිෂ්ට ලෙස ක්‍රියා කරයි, නමුත් පරිශීලකයාට ක්ලික් කිරීමට කිසිවක් නොමැත.

මට ව්‍යාජ සම්බන්ධතා කිහිපයක් ඇති විට, මම ඔවුන්ට 'සම්බන්ධයක් නැති' පන්තියක් ලබා දීමට කැමැත්තෙමි.

JQuery හි, මම පහත කේතය එක් කරමි:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

HTML සඳහා, සබැඳිය සරලවම වේ

<a href="/" class="no-link">Faux-Link</a>

හැෂ්-ටැග් නැංගුරම් සඳහා භාවිතා කරන්නේ නම් මිස මම ඒවා භාවිතා කිරීමට කැමති නැත, මම ඉහත සඳහන් කරන්නේ ව්‍යාජ සබැඳි දෙකකට වඩා ඇති විට පමණි, එසේ නොමැතිනම් මම ජාවාස්ක්‍රිප්ට් සමඟ යන්නෙමි: අවලංගු (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

සාමාන්‍යයෙන්, මම කැමතියි සබැඳියක් භාවිතා කිරීමෙන් වැළකී යමක් පරතරයකින් ඔතා පොප්-අප් හෝ අන්තර්ගත-හෙළිදරව්වක් වැනි සමහර ජාවාස්ක්‍රිප්ට් කේත සක්‍රිය කිරීමේ ක්‍රමයක් ලෙස.

මම විශ්වාස කරන්නේ ඔබ ව්‍යාජ ද්විභාෂාවක් ඉදිරිපත් කරන බවයි. මේවා එකම විකල්ප දෙක නොවේ.

ඔබ නැංගුරම් ටැගය භාවිතා කළත් ඔබට මෙහි ඇත්ත වශයෙන්ම නැංගුරමක් නොමැති බව යෝජනා කළ D4V360 මහතා සමඟ මම එකඟ වෙමි. ඔබ සතුව ඇත්තේ ලේඛනයේ විශේෂ අංශයක් වන අතර එය තරමක් වෙනස් ලෙස හැසිරිය යුතුය. ඒ <span>ටැගය වඩා සුදුසු වේ.

සංවර්ධක මෙවලම් සමඟ මම ගූගල් ක්‍රෝම් දෙකෙහිම උත්සාහ කළ අතර id="#"තත්පර 0.32 ක් ගතවිය. මෙම javascript:void(0)ක්‍රමයට ගත වූයේ තත්පර 0.18 ක් පමණි. එබැවින් ගූගල් ක්‍රෝම් හි javascript:void(0)වඩා හොඳින් හා වේගයෙන් ක්‍රියා කරයි.

මම මූලික වශයෙන් ප්‍රගතිශීලී වැඩි දියුණු කිරීම් භාවිතා කරමින් මෙම ප්‍රායෝගික ලිපියෙන් අර්ථ නිරූපණය කරමි . කෙටි පිළිතුර නම්, ඔබ කිසි විටෙකත් භාවිතා නොකරන බව javascript:void(0);හෝ #ඔබේ පරිශීලක අතුරුමුහුණත ජාවාස්ක්‍රිප්ට් සක්‍රීය කර ඇති බව දැනටමත් අනුමාන කර ඇත්නම් මිස, ඔබ භාවිතා කළ යුතුjavascript:void(0); බවයි. එසේම, පරතරය සබැඳි ලෙස භාවිතා නොකරන්න, එය ආරම්භ කිරීම අර්ථාන්විතව අසත්‍ය බැවින්.

/ Home / Action / Parameters වැනි ඔබේ යෙදුමේ SEO හිතකාමී URL මාර්ග භාවිතා කිරීම හොඳ පුරුද්දකි. ඔබට පළමුව ජාවාස්ක්‍රිප්ට් නොමැතිව වැඩ කරන පිටුවකට සබැඳියක් තිබේ නම්, ඔබට පසුව අත්දැකීම් වැඩි දියුණු කළ හැකිය. වැඩ කරන පිටුවකට සත්‍ය සබැඳියක් භාවිතා කරන්න, ඉන්පසු ඉදිරිපත් කිරීම වැඩි දියුණු කිරීම සඳහා ඔන්ලික් සිදුවීමක් එක් කරන්න.

මෙන්න නියැදියකි. Home / ChangePictures යනු පරිශීලක අතුරුමුහුණත සහ සම්මත HTML ඉදිරිපත් කිරීමේ බොත්තම් සහිත පිටුවක ඇති පෝරමයකට වැඩ කරන සබැඳියකි, නමුත් එය jQueryUI බොත්තම් සහිත මොඩල් සංවාදයකට එන්නත් කර ඇති බව පෙනේ. ජංගම පළමු සංවර්ධනය තෘප්තිමත් කරන බ්‍රව්සරය මත පදනම්ව, කෙසේ හෝ ක්‍රියා කරයි.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>