javascript - जावास्क्रिप्ट लिंक, "#" या "जावास्क्रिप्ट:शून्य(0)" के लिए मुझे किस "href" मान का उपयोग करना चाहिए?




html performance optimization (25)

मैं अन्यत्र सुझावों से सहमत हूं कि आपको href विशेषता में नियमित URL का उपयोग करना चाहिए, फिर कुछ जावास्क्रिप्ट फ़ंक्शन ऑनक्लिक में कॉल करें। दोष यह है कि वे स्वचालित रूप से कॉल के बाद return false जोड़ते return false

इस दृष्टिकोण के साथ समस्या यह है कि यदि कार्य काम नहीं करेगा या यदि कोई समस्या होगी, तो लिंक अनजान हो जाएगा। ऑनक्लिक घटना हमेशा false वापसी करेगी, इसलिए सामान्य यूआरएल नहीं बुलाया जाएगा।

बहुत आसान समाधान है। यदि यह सही तरीके से काम करता true तो फ़ंक्शन को वापस करने दें। फिर यह निर्धारित करने के लिए लौटाए गए मान का उपयोग करें कि क्लिक रद्द किया जाना चाहिए या नहीं:

जावास्क्रिप्ट

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

एचटीएमएल

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

ध्यान दें, कि मैं doSomething() फ़ंक्शन के परिणाम को अस्वीकार करता हूं। यदि यह काम करता true , तो यह true हो जाएगा, इसलिए इसे अस्वीकार कर दिया जाएगा ( false ) और path/to/some/URL नहीं कहा जाएगा। यदि फ़ंक्शन false लौटाएगा (उदाहरण के लिए, ब्राउज़र फ़ंक्शन के भीतर उपयोग की जाने वाली किसी चीज़ का समर्थन नहीं करता है या कुछ और गलत हो जाता है), तो इसे true से अस्वीकार कर दिया जाता true और path/to/some/URL कहा जाता है।

निम्नलिखित लिंक हैं जो एक लिंक बनाने के दो तरीके हैं जिनके पास जावास्क्रिप्ट कोड चलाने का एकमात्र उद्देश्य है। कार्यक्षमता, पेज लोड की गति, सत्यापन उद्देश्यों इत्यादि के मामले में कौन सा बेहतर है?

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>


यदि आप AngularJS का उपयोग करते हैं , तो आप निम्न का उपयोग कर सकते हैं:

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

जो कुछ भी नहीं करेगा।

के अतिरिक्त

  • यह आपको पृष्ठ के शीर्ष पर नहीं ले जाएगा, जैसा कि (#)
    • इसलिए, आपको falseजावास्क्रिप्ट के साथ स्पष्ट रूप से वापस आने की आवश्यकता नहीं है
  • यह संक्षेप में संक्षिप्त है

इसलिए, जब आप <a />टैग के साथ कुछ जावास्क्रिप्ट चीजें कर रहे हैं और यदि आप भी डालते हैं href="#", तो आप ईवेंट के अंत में वापसी झूठी जोड़ सकते हैं (इनलाइन ईवेंट बाध्यकारी के मामले में) जैसे:

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

या आप जावा विशेषता के साथ href विशेषता को बदल सकते हैं जैसे:

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

या

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

लेकिन अर्थात्, इसे प्राप्त करने के सभी उपरोक्त तरीके गलत हैं (हालांकि यह ठीक काम करता है) । यदि पृष्ठ को नेविगेट करने के लिए कोई तत्व नहीं बनाया गया है और इसमें कुछ जावास्क्रिप्ट चीजें हैं, तो यह <a>टैग नहीं होना चाहिए ।

आप बस <button />चीजों या किसी अन्य तत्व जैसे बी, अवधि या आपकी ज़रूरत के अनुसार जो भी फिट बैठते हैं, उसके बजाय आप सभी तत्वों पर ईवेंट जोड़ने की अनुमति दे सकते हैं।

तो, उपयोग करने के लिए एक फायदा है <a href="#">। जब आप करते हैं तो उस तत्व पर डिफ़ॉल्ट रूप से कर्सर पॉइंटर मिलता है a href="#"। इसके लिए, मुझे लगता है कि आप इसके लिए सीएसएस का उपयोग कर सकते हैं जैसे cursor:pointer;इस समस्या को हल करता है।

और अंत में, यदि आप जावास्क्रिप्ट कोड से ईवेंट को बाध्य कर रहे हैं, तो आप टैग event.preventDefault()का उपयोग कर रहे हैं <a>, तो आप इसे प्राप्त करने के लिए कर सकते हैं , लेकिन यदि आप इसके <a>लिए टैग का उपयोग नहीं कर रहे हैं , तो आपको एक फायदा मिलता है, आप ' यह करने की जरूरत नहीं है।

इसलिए, यदि आप देखते हैं, तो बेहतर है कि इस तरह के सामान के लिए टैग का उपयोग न करें।


मैंने डेवलपर टूल के साथ Google क्रोम में दोनों की कोशिश की, और id="#"0.32 सेकंड लिया। जबकि javascript:void(0)विधि केवल 0.18 सेकंड ले लिया। तो Google क्रोम में, javascript:void(0)बेहतर और तेज़ काम करता है।


मै इस्तेमाल करूंगा:

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

कारण:

  1. यह hrefसरल बनाता है , खोज इंजनों की आवश्यकता होती है। यदि आप किसी और चीज का उपयोग करते हैं (जैसे स्ट्रिंग), तो यह एक 404 not foundत्रुटि का कारण बन सकता है ।
  2. जब माउस लिंक पर होवर करता है, तो यह नहीं दिखाता कि यह एक स्क्रिप्ट है।
  3. उपयोग करके return false;, पृष्ठ शीर्ष पर नहीं जाता है या backबटन को तोड़ता नहीं है ।

जब मुझे कई गलत-लिंक मिलते हैं, तो मैं उन्हें 'नो-लिंक' का वर्ग देना पसंद करता हूं।

फिर jQuery में, मैं निम्नलिखित कोड जोड़ता हूं:

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

और एचटीएमएल के लिए, लिंक बस है

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

मुझे हैश-टैग का उपयोग करना पसंद नहीं है जब तक कि उन्हें एंकरों के लिए उपयोग नहीं किया जाता है, और जब मैं दो से अधिक अशुद्ध-लिंक प्राप्त करता हूं, तो मैं केवल उपरोक्त करता हूं, अन्यथा मैं जावास्क्रिप्ट के साथ जाता हूं: शून्य (0)।

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

आम तौर पर, मैं बस एक लिंक का उपयोग करने से बचना चाहता हूं और केवल एक अवधि में कुछ लपेटना चाहता हूं और कुछ जावास्क्रिप्ट कोड को सक्रिय करने के तरीके के रूप में उपयोग करता हूं, जैसे पॉप-अप या सामग्री-प्रकट करना।


मेरा मानना ​​है कि आप झूठी डिचोटोमी पेश कर रहे हैं। ये केवल दो विकल्प नहीं हैं।

मैं श्री डी 4 वी 360 से सहमत हूं जिन्होंने सुझाव दिया कि, भले ही आप एंकर टैग का उपयोग कर रहे हों, आपको वास्तव में यहां एक एंकर नहीं है। आपके पास एक दस्तावेज़ का एक विशेष भाग है जो थोड़ा अलग व्यवहार करना चाहिए। एक <span>टैग कहीं अधिक उपयुक्त है।


न तो अगर तुम मुझसे पूछो;

यदि आपके "लिंक" में कुछ जावास्क्रिप्ट कोड चलाने का एकमात्र उद्देश्य है तो यह एक लिंक के रूप में योग्य नहीं है; इसके बजाय एक जावास्क्रिप्ट फ़ंक्शन के साथ पाठ का एक टुकड़ा इसके साथ मिलकर। मैं एक <span> टैग का उपयोग करने के लिए एक onclick handler और कुछ मूल सीएसएस का उपयोग एक लिंक को अपनाने के लिए करने की अनुशंसा करता हूं। नेविगेशन के लिए लिंक बनाए जाते हैं, और यदि आपका जावास्क्रिप्ट कोड नेविगेशन के लिए नहीं है तो यह <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="#" onclick="myJsFunc(); return false;">Link</a>

यदि आप कोणीय 2 का उपयोग करते हैं, तो इस तरह काम करता है:

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

यहां देखें https://.com/a/45465728/2803344


यदि कोई ऐसा नहीं है hrefतो एंकर टैग का उपयोग करने का कोई कारण नहीं है।

आप लगभग हर तत्व पर ईवेंट (क्लिक, होवर, इत्यादि) संलग्न कर सकते हैं, तो क्यों न केवल एक spanया एक का उपयोग करें div?

और जावास्क्रिप्ट वाले उपयोगकर्ताओं के लिए अक्षम: यदि कोई फ़ॉलबैक नहीं है (उदाहरण के लिए, एक विकल्प href), तो कम से कम उस तत्व को देखने और उस पर बातचीत करने में सक्षम नहीं होना चाहिए, जो कुछ भी है <a>या <span>टैग है।


मैं उपयोग का चयन करता हूं javascript:void(0), क्योंकि इसका उपयोग सामग्री मेनू खोलने के लिए राइट क्लिक को रोक सकता है। लेकिन javascript:;छोटा है और वही काम करता है।


मैं आमतौर पर के लिए जाना

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

यह जावास्क्रिप्ट से छोटा है: शून्य (0) और वही करता है।


आप जो हासिल करना चाहते हैं उसके आधार पर, आप ऑनक्लिक भूल सकते हैं और केवल href का उपयोग कर सकते हैं:

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

यह झूठी वापसी की जरूरत के आसपास हो जाता है। मुझे #विकल्प पसंद नहीं है क्योंकि, जैसा कि बताया गया है, यह उपयोगकर्ता को पृष्ठ के शीर्ष पर ले जाएगा। यदि आपके पास उपयोगकर्ता को भेजने के लिए कहीं और है यदि उनके पास जावास्क्रिप्ट सक्षम नहीं है (जो दुर्लभ है जहां मैं काम करता हूं, लेकिन एक बहुत अच्छा विचार), तो स्टीव की प्रस्तावित विधि बहुत अच्छी तरह से काम करती है।

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

अंत में, javascript:void(0)यदि आप नहीं चाहते कि आप कहीं भी जाएं और यदि आप जावास्क्रिप्ट फ़ंक्शन को कॉल नहीं करना चाहते हैं तो आप इसका उपयोग कर सकते हैं । यह बहुत अच्छा काम करता है यदि आपके पास एक ऐसी छवि है जिसे आप माउसओवर ईवेंट के साथ करना चाहते हैं, लेकिन उपयोगकर्ता के लिए क्लिक करने के लिए कुछ भी नहीं है।


मैं निम्नलिखित का उपयोग करता हूं

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

बजाय

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

आम तौर पर, आपको यह सुनिश्चित करने के लिए हमेशा एक फॉल बैक लिंक होना चाहिए कि जावास्क्रिप्ट वाले क्लाइंट्स में अभी भी कुछ कार्यक्षमता है। इस अवधारणा को अविभाज्य जावास्क्रिप्ट कहा जाता है।

उदाहरण ... मान लें कि आपके पास निम्न खोज लिंक है:

<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जबकि जावास्क्रिप्ट के साथ आपके दर्शक आपकी उन्नत कार्यक्षमता देखते हैं।


जब तक आप जावास्क्रिप्ट का उपयोग करके लिंक लिख रहे हों (ताकि आप जानते हैं कि यह ब्राउज़र में सक्षम है), आपको आदर्श रूप से उन लोगों के लिए एक उचित लिंक प्रदान करना चाहिए जो जावास्क्रिप्ट अक्षम के साथ ब्राउज़ कर रहे हैं और फिर अपने ऑनक्लिक में लिंक की डिफ़ॉल्ट कार्रवाई को रोकें आयोजन प्रबंधकर्ता। इस प्रकार जावास्क्रिप्ट सक्षम वाले लोग फ़ंक्शन चलाएंगे और जावास्क्रिप्ट अक्षम वाले लोग लिंक पर क्लिक करने और कुछ भी नहीं होने के बजाय उचित पृष्ठ (या उसी पृष्ठ के भीतर स्थान) पर जायेंगे।


जावास्क्रिप्ट चलाने के एकमात्र उद्देश्य के लिए लिंक का उपयोग न करें।

Href = "#" का उपयोग पृष्ठ को शीर्ष पर स्क्रॉल करता है; शून्य (0) का उपयोग ब्राउज़र के भीतर नेविगेशन समस्याओं को बनाता है।

इसके बजाय, किसी लिंक के अलावा किसी तत्व का उपयोग करें:

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

और इसे सीएसएस के साथ स्टाइल करें:

.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>

काफी सरल!


'#' उपयोगकर्ता को पृष्ठ के शीर्ष पर वापस ले जाएगा, इसलिए मैं आमतौर पर void(0) साथ जाता हूं।

javascript:; javascript:void(0); तरह व्यवहार भी करता है javascript:void(0);


मैं कहूंगा कि एक ऐसा तरीका है जिसे आप कभी भी उपयोग नहीं करेंगे, जैसे कि # Do1Not2Use3This4Id5 या एक समान आईडी, जिसे आप 100% सुनिश्चित करते हैं, कोई भी इसका उपयोग नहीं करेगा और लोगों को अपमानित नहीं करेगा।

  1. Javascript:void(0)एक बुरा विचार है और सीएसपी-सक्षम HTTPS पृष्ठों पर सामग्री सुरक्षा नीति का उल्लंघन करता है https://developer.mozilla.org/en/docs/Security/CSP (@ jakub.g के लिए धन्यवाद)
  2. #दबाए जाने पर उपयोगकर्ता का उपयोग शीर्ष पर वापस कूद जाएगा
  3. जावास्क्रिप्ट सक्षम नहीं होने पर पृष्ठ को बर्बाद नहीं करेगा (जब तक आपके पास जावास्क्रिप्ट का पता लगाने वाला कोड न हो
  4. यदि जावास्क्रिप्ट सक्षम है तो आप डिफ़ॉल्ट घटना को अक्षम कर सकते हैं
  5. आपको तब तक href का उपयोग करना होगा जब तक कि आप अपने ब्राउज़र को कुछ टेक्स्ट चुनने से कैसे रोकें, (पता नहीं है कि 4 का उपयोग करने से पता चलता है कि ब्राउजर को टेक्स्ट चुनने से रोकता है)

मूल रूप से इस आलेख में कोई भी 5 का उल्लेख नहीं करता है, जो मुझे लगता है कि आपकी साइट गैर-व्यावसायिक के रूप में सामने आती है अगर यह अचानक लिंक के आसपास चीजों का चयन करना शुरू कर देता है।


न तो।

यदि आपके पास एक वास्तविक यूआरएल हो सकता है जो एचआरईएफ के रूप में समझ में आता है। यदि कोई लिंक आपके लिंक पर एक नया टैब खोलने के लिए मध्य-क्लिक करता है या यदि उनके पास जावास्क्रिप्ट अक्षम है तो ऑनक्लिक आग नहीं लगेगी।

यदि यह संभव नहीं है, तो आपको कम से कम दस्तावेज़ में एंकर टैग को जावास्क्रिप्ट और उपयुक्त क्लिक ईवेंट हैंडलर से इंजेक्ट करना चाहिए।

मुझे एहसास है कि यह हमेशा संभव नहीं है, लेकिन मेरी राय में इसे किसी भी सार्वजनिक वेबसाइट के विकास के लिए प्रयास किया जाना चाहिए।

अविभाज्य जावास्क्रिप्ट और प्रगतिशील वृद्धि (विकिपीडिया दोनों) देखें।


मैं ईमानदारी से न तो सुझाव दूंगा। मैं उस व्यवहार के लिए एक शैलीबद्ध <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 विशेषता का उपयोग न करने के लिए स्क्रिप्ट के माध्यम से बाध्यकारी भी सुझाव देता हूं। एकमात्र गोचा पुराना आईईएस में psuedo 3 डी टेक्स्ट प्रभाव है जिसे अक्षम नहीं किया जा सकता है।

यदि आपको ए तत्व का उपयोग करना है , तो javascript:void(0); उपयोग करें javascript:void(0); पहले से ही उल्लेख किए गए कारणों के लिए।

  • यदि आपका ऑनक्लिक ईवेंट विफल रहता है तो हमेशा अवरोध करेगा।
  • गलती लोड कॉल नहीं होगी, या हैश परिवर्तन के आधार पर अन्य घटनाओं को ट्रिगर नहीं करेगा
  • हैश टैग अप्रत्याशित व्यवहार का कारण बन सकता है यदि क्लिक (फ्लाई फेंकता है) से बचता है, तब तक इससे बचें जब तक कि यह उचित गिरावट के माध्यम से न हो, और आप नेविगेशन इतिहास को बदलना चाहते हैं।

नोट: आप javascript:void('Delete record 123') जैसे javascript:void('Delete record 123') को प्रतिस्थापित कर सकते हैं javascript:void('Delete record 123') जो एक अतिरिक्त संकेतक के रूप में कार्य कर सकता है जो दिखाएगा कि क्लिक वास्तव में क्या करेगा।


<a href="#" onclick="myJsFunc();">Link</a> या <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> या करना जो कुछ भी onclick विशेषता है - पांच साल पहले ठीक था, हालांकि अब यह एक बुरा अभ्यास हो सकता है। यहाँ पर क्यों:

  1. यह घुसपैठ करने वाली जावास्क्रिप्ट के अभ्यास को बढ़ावा देता है - जिसे बनाए रखना मुश्किल और स्केल करना मुश्किल हो गया है। Unobtrusive जावास्क्रिप्ट में इस पर और अधिक।

  2. आप अपना समय अविश्वसनीय रूप से अत्यधिक वर्बोज़ कोड लिख रहे हैं - जिसमें आपके कोडबेस के लिए बहुत कम (यदि कोई है) लाभ है।

  3. वांछित परिणाम को पूरा करने के लिए अब बेहतर, आसान, और अधिक रखरखाव योग्य और स्केलेबल तरीके हैं।

अविभाज्य जावास्क्रिप्ट तरीका

बस एक href विशेषता नहीं है! कोई भी अच्छा सीएसएस रीसेट लापता डिफ़ॉल्ट कर्सर शैली का ख्याल रखेगा, ताकि यह एक गैर-मुद्दा हो। फिर अपनी जावास्क्रिप्ट कार्यक्षमता को खूबसूरत और अविभाज्य सर्वोत्तम प्रथाओं का उपयोग करके संलग्न करें - जो आपके जावास्क्रिप्ट तर्क के बजाय जावास्क्रिप्ट में रहता है, जो आपके मार्कअप के बजाय जावास्क्रिप्ट में रहता है - जो आवश्यक है जब आप बड़े पैमाने पर जावास्क्रिप्ट अनुप्रयोगों को विकसित करना शुरू करते हैं, जिसके लिए आपके तर्क को विभाजित करने की आवश्यकता होती है ब्लैकबॉक्स घटक और टेम्पलेट्स। बड़े पैमाने पर जावास्क्रिप्ट एप्लिकेशन आर्किटेक्चर में इस पर और अधिक

सरल कोड उदाहरण

// 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 उदाहरण

एक स्केलेबल, ब्लैकबॉक्स, बैकबोन.जेएस घटक उदाहरण के लिए - यहां यह काम करने वाला jsfiddle उदाहरण देखें । ध्यान दें कि हम अविभाज्य जावास्क्रिप्ट प्रथाओं का उपयोग कैसे करते हैं, और कोड की एक छोटी मात्रा में एक घटक होता है जिसे पृष्ठ पर कई बार दोहराया जा सकता है बिना साइड इफेक्ट्स या अलग-अलग घटक उदाहरणों के बीच संघर्ष। गजब का!

टिप्पणियाँ

  • a तत्व पर href विशेषता को निकालने से tab कुंजी नेविगेशन का उपयोग करके तत्व को सुलभ नहीं किया जाएगा। यदि आप उन तत्वों को tab कुंजी के माध्यम से एक्सेस करने के लिए चाहते हैं, तो आप tabindex विशेषता सेट कर सकते हैं, या इसके बजाए button तत्वों का उपयोग कर सकते हैं। ट्रैकर 1 के उत्तर में वर्णित सामान्य लिंक की तरह दिखने के लिए आप आसानी से बटन तत्वों को स्टाइल कर सकते हैं।

  • a तत्व पर href विशेषता को छोड़कर Internet Explorer 6 और Internet Explorer 7 को a:hover स्टाइल पर नहीं लेना चाहिए, यही कारण है कि हमने इसे एक. a.hover माध्यम से पूरा करने के लिए एक सरल जावास्क्रिप्ट शिम जोड़ा है। जो पूरी तरह से ठीक है, जैसे कि आपके पास कोई href विशेषता नहीं है और कोई सुंदर गिरावट नहीं है, तो आपका लिंक वैसे भी काम नहीं करेगा - और आपको चिंता करने के लिए बड़े मुद्दे होंगे।

  • यदि आप अपनी क्रिया को अभी भी जावास्क्रिप्ट अक्षम के साथ काम करना चाहते हैं, तो एक href विशेषता वाले तत्व का उपयोग करना जो कुछ यूआरएल पर जाता है जो अजाक्स अनुरोध के माध्यम से मैन्युअल रूप से कार्रवाई करेगा या जो भी रास्ता तय करना चाहिए। यदि आप ऐसा कर रहे हैं, तो आप यह सुनिश्चित करना चाहते हैं कि आप अपने क्लिक कॉल पर event.preventDefault() करें, यह सुनिश्चित करने के लिए कि बटन कब क्लिक किया गया है, यह लिंक का पालन नहीं करता है। इस विकल्प को सुंदर गिरावट कहा जाता है।


आदर्श रूप से आप यह करेंगे:

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

या, इससे भी बेहतर, आपके पास HTML में डिफ़ॉल्ट क्रिया लिंक होगा, और आप डीओएम प्रस्तुत करने के बाद जावास्क्रिप्ट के माध्यम से अनजाने में तत्व पर ऑनक्लिक ईवेंट जोड़ देंगे, इस प्रकार यह सुनिश्चित करना होगा कि यदि जावास्क्रिप्ट मौजूद नहीं है / उपयोग नहीं किया गया है बेकार घटना हैंडलर आपके कोड को छेड़छाड़ कर रहे हैं और आपकी वास्तविक सामग्री को संभावित रूप से खराब कर रहे हैं (या कम से कम विचलित)।


एक अद्यतन के रूप में ... ECMAScript 6 के साथ आप अंतिम रूप से फ़ंक्शन पैरामीटर घोषणाओं में डिफ़ॉल्ट मान सेट कर सकते हैं:

function f (x, y = 7, z = 42) {
  return x + y + z
}

f(1) === 50

जैसा कि संदर्भित है - http://es6-features.org/#DefaultParameterValues





javascript html performance optimization href