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




html performance (20)

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

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>

https://code.i-harness.com


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

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

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


केवल # का उपयोग करके कुछ मजाकिया आंदोलन होते हैं, इसलिए यदि आप JavaScript bla, bla, #self , के टाइपिंग प्रयासों को सहेजना चाहते हैं तो मैं #self का उपयोग करने की सलाह #self


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

यदि आपके "लिंक" में कुछ जावास्क्रिप्ट कोड चलाने का एकमात्र उद्देश्य है तो यह एक लिंक के रूप में योग्य नहीं है; इसके बजाय एक जावास्क्रिप्ट फ़ंक्शन के साथ पाठ का एक टुकड़ा इसके साथ मिलकर। मैं एक <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


मैं javascript:void(0) उपयोग करता हूं javascript:void(0)

तीन कारण डेवलपर्स की एक टीम के बीच # के उपयोग को प्रोत्साहित करने के लिए अनिवार्य रूप से कुछ इस तरह के फ़ंक्शन के रिटर्न वैल्यू का उपयोग करते हैं:

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

लेकिन फिर वे ऑनक्लिक में return doSomething() का उपयोग करना भूल जाते हैं और बस doSomething() उपयोग करें।

# से बचने का दूसरा कारण यह है कि अंतिम return false; अगर कॉल किया गया फ़ंक्शन किसी त्रुटि को फेंक देता है तो निष्पादित नहीं होगा। इसलिए डेवलपर्स को बुलाए गए फ़ंक्शन में उचित रूप से किसी भी त्रुटि को संभालना याद रखना होगा।

एक तीसरा कारण यह है कि ऐसे मामले हैं जहां onclick घटना संपत्ति गतिशील रूप से असाइन की जाती है। मैं विशेष रूप से अनुलग्नक या किसी अन्य विधि के लिए फ़ंक्शन को कोड किए बिना किसी फ़ंक्शन को कॉल करने या इसे गतिशील रूप से असाइन करने में सक्षम होना पसंद करता हूं। इसलिए एचटीएमएल मार्कअप में मेरा onclick (या कुछ भी) इस तरह दिखता है:

onclick="someFunc.call(this)"

या

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

javascript:void(0) का उपयोग करना javascript:void(0) उपरोक्त सभी सिरदर्द से बचाता है, और मुझे डाउनसाइड के कोई उदाहरण नहीं मिला है।

तो यदि आप एकमात्र डेवलपर हैं तो आप स्पष्ट रूप से अपनी पसंद कर सकते हैं, लेकिन यदि आप एक टीम के रूप में काम करते हैं तो आपको या तो राज्य करना होगा:

href="#" प्रयोग करें, सुनिश्चित करें कि onclick हमेशा return false; अंत में, किसी भी बुलाए गए फ़ंक्शन में कोई त्रुटि नहीं आती है और यदि आप onclick संपत्ति के लिए गतिशील रूप से फ़ंक्शन संलग्न करते हैं तो सुनिश्चित करें कि साथ ही कोई त्रुटि फेंकने से यह false नहीं आती false

या

href="javascript:void(0)"

दूसरा संवाद करने के लिए स्पष्ट रूप से बहुत आसान है।


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

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

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


मैं इसके बजाय <button> तत्व का उपयोग करने की अनुशंसा करता हूं, खासकर यदि नियंत्रण डेटा में परिवर्तन उत्पन्न करना है। (कुछ पोस्ट की तरह।)

यह बेहतर है कि यदि आप अविभाज्य तत्वों को इंजेक्ट करते हैं, तो एक प्रकार का प्रगतिशील वृद्धि। ( यह टिप्पणी देखें।)


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

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

बजाय

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

# javascript:anything से बेहतर है javascript:anything , लेकिन निम्नलिखित भी बेहतर है:

HTML:

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

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

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

आपको हमेशा सुगंधित गिरावट के लिए प्रयास करना चाहिए (यदि उपयोगकर्ता में जावास्क्रिप्ट सक्षम नहीं है ... और जब यह चश्मे और बजट के साथ होता है)। इसके अलावा, इसे HTML में सीधे जावास्क्रिप्ट विशेषताओं और प्रोटोकॉल का उपयोग करने के लिए खराब रूप माना जाता है।


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

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


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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

आप जो हासिल करना चाहते हैं उसके आधार पर, आप ऑनक्लिक भूल सकते हैं और केवल 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();
   });
});

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

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

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

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

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


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

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

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


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

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

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


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

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


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


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


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

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

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

के अतिरिक्त

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





href