सवाल जावास्क्रिप्ट लिंक, "#" या "जावास्क्रिप्ट: शून्य (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>


3677


मूल


जब तक मैं कुछ याद नहीं कर रहा हूँ, <a href="javascript:void(0)" onclick="myJsFunc();"> बिल्कुल कोई मतलब नहीं है। अगर तुम जरूर उपयोग javascript: psuedo- प्रोटोकॉल, आपको जरूरत नहीं है onclick विशेषता भी। <a href="javascript:myJsFunc();"> ठीक काम करेगा। - Wesley Murch
@ वेस्लेमर्च - अगर myJsFunc() एक वापसी मूल्य है, आपका पृष्ठ तोड़ देगा। jsfiddle.net/jAd9G  आपको अभी भी उपयोग करना होगा void इस तरह: <a href="javascript:void myJsFunc();">। लेकिन फिर, व्यवहार अभी भी अलग होगा। संदर्भ मेनू के माध्यम से लिंक को आमंत्रित करना ट्रिगर नहीं करता है click घटना। - gilly3
क्यों नहीं <a href="javascript:;" onclick="myEvent()"? - 3k-
javascript:; से टाइप करने के लिए बहुत तेज़ है javascript:void(0) - Mike Causer
सबसे पहले सोचा जब यह देख रहा था: "आप एक का उपयोग क्यों करेंगे <a> यदि आप क्या करना चाहते हैं तो टैग करें मूल ब्राउज़र सुविधा के माध्यम से कोई अन्य पृष्ठ नहीं खोलना है, बल्कि कुछ जावास्क्रिप्ट 'एक्शन' ट्रिगर होने के लिए है? बस एक का उपयोग कर span एक वर्ग के साथ टैग करें js-trigger शायद बेहतर होगा "या क्या मुझे कुछ याद आ रहा है? - Adrien Be


जवाब:


मैं उपयोग करता हूं 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) उपरोक्त सभी सिरदर्द से बचाता है, और मुझे नकारात्मक पक्ष के कोई उदाहरण नहीं मिला है।

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

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

या

उपयोग href="javascript:void(0)"

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


2009



मैं हमेशा एक नया टैब में हर लिंक खोलता हूं और यही कारण है कि जब लोग इसका उपयोग करते हैं तो मैं व्यक्तिगत रूप से इससे नफरत करता हूं href="javascript:void(0)" तरीका - Timo Huovinen
क्षमा करें असहमत क्यों इस जवाब में इतने सारे अपवर्तक हैं? का कोई उपयोग javascript: बुरा अभ्यास माना जाना चाहिए, घुसपैठ कर सकते हैं और सुंदर डी-ग्रेड नहीं है। - Lankymart
अगले दो उत्तरों इस से कहीं बेहतर और उचित हैं। इसके अलावा पहले दो तर्क अमान्य हैं क्योंकि event.preventDefault() डिफ़ॉल्ट व्यवहार को रोकने के लिए बिल्कुल है (जैसे इस मामले में पृष्ठ के शीर्ष पर कूदना) और बिना किसी सब के बेहतर काम करें return false; पागलपन। - sudee
2013 के लिए फास्ट-फॉरवर्ड: javascript:void(0) का उल्लंघन करती है सामग्री सुरक्षा नीति सीएसपी-सक्षम HTTPS पृष्ठों पर। उपयोग करने के लिए एक विकल्प होगा href='#' तथा event.preventDefault() हैंडलर में, लेकिन मुझे यह पसंद नहीं है। शायद आप उपयोग करने के लिए एक सम्मेलन स्थापित कर सकते हैं href='#void' और सुनिश्चित करें कि पृष्ठ पर कोई तत्व नहीं है id="void"। इस तरह, गैर-मौजूदा एंकर के लिंक पर क्लिक करने से पृष्ठ स्क्रॉल नहीं होगा। - jakub.g
आप "#" का उपयोग कर सकते हैं और फिर "#" के साथ सभी लिंक पर क्लिक ईवेंट को बाध्य कर सकते हैं href। यह jQuery में किया जाएगा: $('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; }); - Nathan


न तो।

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

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

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

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


1201



क्या आप एक उदाहरण दे सकते हैं कि कैसे कोई व्यक्ति जावास्क्रिप्ट के साथ दस्तावेज़ में एंकर टैग इंजेक्ट कर सकता है और उपयुक्त क्लिक ईवेंट हैंडलर "? - user456584
एंकर टैग को इंजेक्ट क्यों करें यदि इसका उपयोग केवल तत्व को होने की अनुमति देने के लिए किया जाता है) क्लिक किया गया बी) "पॉइंटर" कर्सर प्रदर्शित करें। ऐसा लगता है कि इस परिदृश्य में एक एंकर टैग को इंजेक्ट करने के लिए अप्रासंगिक लगता है। - crush
न तो के लिए +1, लेकिन दृष्टिकोण खत्म हो गया है। तथ्य या तो का उपयोग रहता है javascript: या # दोनों बुरे प्रथाएं हैं और प्रोत्साहित नहीं किया जाना चाहिए। अच्छा लेख btw। - Lankymart
@ क्रश: मैं एक div या span का उपयोग नहीं करेंगे; स्पष्ट रूप से, यह बहुत ही चीज़ की तरह लगता है <button> के लिए बनाया गया था। लेकिन सहमत हो गया: यह शायद विशेष रूप से एक नहीं होना चाहिए <a> यदि इसके लिए लिंक करने के लिए कोई उपयुक्त जगह नहीं है। - cHao
@cHao बटन शायद सबसे अच्छा विकल्प है। मुझे लगता है कि मुख्य बिंदु यह है कि HTML तत्व को इसकी डिफ़ॉल्ट प्रस्तुति उपस्थिति के आधार पर नहीं चुना जाना चाहिए, बल्कि दस्तावेज़ की संरचना के लिए इसका महत्व है। - crush


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

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

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

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

टिप्पणियाँ

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

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

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


735



सावधान रहें, href गुणों को छोड़कर क्रॉस ब्राउज़र संगत नहीं है और आप इंटरनेट एक्सप्लोरर में होवर प्रभाव जैसे चीजों पर हार जाएंगे - Thomas Davis
मैं इस उत्तर से सहमत हूं, लेकिन एक और मुद्दा है जो href विशेषता को छोड़ने से उत्पन्न होता है। कई ब्राउज़रों में यदि आप लिंक को कई बार बहुत जल्दी क्लिक करते हैं तो यह वास्तव में पृष्ठ पर टेक्स्ट का चयन करेगा। Href को सेट करना उस विशेष समस्या को हल करता है जो अन्यथा ठीक करना आसान नहीं है। - Christopher Camps
सावधान रहें: लिंक-स्टाइल button यहां सुझाए गए दृष्टिकोण से पीड़ित है IE9 और निचले स्तर में अपरिहार्य "3 डी" सक्रिय स्थिति। - Brennan Roberts
मुझे यह जवाब अत्यधिक विनाशकारी लगता है। ऐसे समय होते हैं जब आप जेएस व्यवहार को 1 या 2 को href पर लागू करना चाहते हैं। उस स्थिति में अतिरिक्त सीएसएस को परिभाषित करने और पूरे जेएस फ़ंक्शन को इंजेक्ट करने के लिए यह अधिक है। कुछ मामलों में (उदा। सीएमएस के माध्यम से सामग्री जोड़ना) आप वास्तव में नहीं हैं अनुमति नए सीएसएस या स्टैंडअलोन जेएस इंजेक्ट करने के लिए, और इनलाइन वह सब कुछ है जो आप कर सकते हैं। मैं नहीं देखता कि इनलाइन समाधान कैसे कम रखरखाव योग्य है प्रयोग में 1 या 2 सरल जेएस एक href के लिए। बुरे अभ्यास पर व्यापक सामान्य वक्तव्यों के बारे में हमेशा संदेह न करें, इसमें एक भी शामिल है :) - Jordan Rieger
उन सभी "नोट्स" के साथ जो हल करना मुश्किल है (एक टैबिंडेक्स सेट करना जटिल पृष्ठ पर परेशानी मांग रहा है!)। बस करने के लिए बहुत बेहतर है javascript:void(0)। यह व्यावहारिक उत्तर है, और असली दुनिया में एकमात्र समझदार जवाब है। - Abhi Beckert


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

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


281



इससे बचने का तरीका ऑनक्लिक इवेंट हैंडलर में झूठी वापसी करना है। - Guvante
इवेंट हैंडलर में झूठ लौटने से यह नहीं बचता है कि अगर जावास्क्रिप्ट जेएस सफलतापूर्वक नहीं चलता है। - Quentin
"#omeNonExistantAnchorName" का उपयोग करके अच्छी तरह से काम करता है क्योंकि इसमें कहीं भी कूदना नहीं है। - scunliffe
यदि आपके पास बेस href है, तो # या #something आपको उस एंकर पर ले जाएगा आधार href पर पृष्ठ, वर्तमान पृष्ठ की बजाय। - Abhi Beckert
शेबांग (#!) चाल है लेकिन यह निश्चित रूप से खराब अभ्यास है। - Neel


मैं ईमानदारी से न तो सुझाव दूंगा। मैं एक शैली का उपयोग करेंगे <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); पहले से ही उल्लेख किए गए कारणों के लिए।

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

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


209



IE8 / IE9 में, मैं बटन में सक्रिय 1px "3 डी" ऑफसेट को हटाने में असमर्थ हूं: सक्रिय स्थिति। - Brennan Roberts
@ ब्रेनन रॉबर्ट्स हाँ, दुर्भाग्यवश, बटनों की कोई भी स्टाइल आईई के साथ अधिक समस्याग्रस्त है ... मुझे अभी भी लगता है कि यह शायद सबसे उपयुक्त दृष्टिकोण है, न कि मैं अवसर पर अपने नियम तोड़ता हूं। - Tracker1
फिर उपयोग न करें <button> लेकिन ए input type=button बजाय? - Patrik Affentranger
फिर एक का उपयोग करें <clickable> तत्व। या ए <clickabletim> आप चाहें तो। दुर्भाग्यवश, गैर-मानक टैग या सादे div का उपयोग करके कीबोर्ड उपयोगकर्ताओं को तत्व पर ध्यान केंद्रित करना मुश्किल हो सकता है। - joeytwiddle
यह जवाब ऊपर होना चाहिए। यदि आपको यह दुविधा हो रही है, तो संभावना है कि आपको वास्तव में आवश्यकता है button। और आईई 9 तेजी से बाजार हिस्सेदारी खो रहा है, सौभाग्य से, और 1 पीएक्स सक्रिय प्रभाव हमें अर्थपूर्ण मार्कअप का उपयोग करने से नहीं रोकना चाहिए। <a> एक लिंक है, यह आपके पास है, हमारे कार्यों के लिए <button>के। - mjsarfatti


पहला उपयोगकर्ता, आदर्श रूप से उपयोगकर्ता के जावास्क्रिप्ट को अक्षम करने के मामले में अनुसरण करने के लिए वास्तविक लिंक के साथ। जावास्क्रिप्ट निष्पादित होने पर क्लिक ईवेंट को फायरिंग से रोकने के लिए बस झूठी वापसी सुनिश्चित करें।

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

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

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

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


128



तो जावास्क्रिप्ट सक्षम के साथ उपयोगकर्ता एजेंटों में और फ़ंक्शन समर्थित यह जावास्क्रिप्ट फ़ंक्शन चलाता है, पृष्ठ के शीर्ष पर एक लिंक के लिए वापस गिर रहा है (उपयोगकर्ता एजेंटों के लिए जहां जेएस किसी भी कारण से विफल रहता है)? यह शायद ही कभी एक समझदार फॉलबैक है। - Quentin
"आदर्श रूप से उपयोगकर्ता के जावास्क्रिप्ट को अक्षम करने के मामले में अनुसरण करने के लिए एक वास्तविक लिंक के साथ", यह एक उपयोगी पृष्ठ पर नहीं जा रहा है, भले ही यह सिर्फ एक स्पष्टीकरण है कि साइट को जेएस को काम करने की आवश्यकता है। विफल होने के कारण, मैं डेवलपर को तैनाती से पहले उचित ब्राउज़र सुविधा का पता लगाने आदि का उपयोग करने की अपेक्षा करता हूं। - Zach
मुझे लगता है कि (उम्मीद है) कि ऐसा कुछ केवल पॉपअप या कुछ समान दिखने के लिए होगा। उस स्थिति में, डिफ़ॉल्ट पॉपअप पेज यूआरएल होगा। यदि यह किसी वेब एप्लिकेशन का हिस्सा है, या जेएस अक्षम होने से पृष्ठ पूरी तरह से टूट जाएगा, तो इस कोड में अन्य समस्याएं हैं ... - Brian Moeskau
मेरे वेब ऐप्स को गर्वपूर्वक अपनाने के लिए डिज़ाइन किया गया है, इसलिए लिंक अभी भी एक उपयोगी पृष्ठ होगा। जब तक आपका वेब ऐप एक चैट क्लाइंट या इंटरैक्टिव कुछ नहीं है, तो यह काम करना चाहिए यदि आप दिमाग में गिरावट के साथ डिजाइन करने के लिए समय लगाते हैं। - Zach
मुद्दा यह है कि अगर myJsFunc एक त्रुटि फेंकता है, तो यह वापसी झूठी के लिए कब्जा नहीं किया जाएगा। - Tracker1


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

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

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


90





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

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


86



यह दृष्टिकोण 'लिंक' को माउस केवल ऑपरेशन पर प्रतिबंधित करता है। कुंजीपटल के माध्यम से एक एंकर का दौरा किया जा सकता है और जब एंटर कुंजी दबाया जाता है तो इसकी 'ऑनक्लिक' घटना निकाल दी जाती है। - AnthonyWJones
आपके सीएसएस में हार्डकोडिंग रंग ब्राउज़र को कस्टम रंगों का उपयोग करने से रोक देगा जो उपयोगकर्ता परिभाषित कर सकता है, जो पहुंच के साथ समस्या हो सकती है। - Hosam Aly
<span>के लिए मतलब नहीं है कर कुछ भी। <A>nchors और <buttons> इसके लिए उपयोग किया जाता है! - redShadow
का उपयोग करते हुए buttons एक का उपयोग करते समय यहां एक बेहतर विकल्प है span नहीं है। - apnerve
मुझे लगता है कि एक एंकर टैग की तुलना में एक अवधि बेहतर है। एंकर टैग आपको अनिवार्य href विशेषता के लिए निर्देशित करने के लिए मौजूद है। यदि आप href का उपयोग नहीं करेंगे, तो एंकर का उपयोग न करें। यह लिंक को केवल माउस तक सीमित नहीं करता है क्योंकि यह एक लिंक नहीं है। इसमें कोई href नहीं है। यह एक बटन की तरह है लेकिन यह पोस्ट नहीं करता है। कुछ भी करने के लिए नहीं होने वाला अवधि पूरी तरह से अमान्य है। एक ड्रॉपडाउन मेनू पर विचार करें जो आपके द्वारा होवर करते समय सक्रिय करता है। यह संभवतः स्पैन और divs का संयोजन है, जो स्क्रीन पर एक क्षेत्र का विस्तार करने वाले बटन के फ़ंक्शन को निष्पादित करता है। - NibblyPig


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


73



वाह, इस टिप के लिए अंगूठे ऊपर। कभी नहीं पता था कि आप इसका उपयोग कर सकते हैं #self नामित टैग के लिए, और पेज के शीर्ष पर कूदने के कष्टप्रद ब्राउज़र व्यवहार से बचें। धन्यवाद। - alonso.torres
सन्दर्भ के लिए, #self विशेष प्रतीत नहीं होता है। कोई भी खंड पहचानकर्ता जो दस्तावेज में किसी भी तत्व के नाम या आईडी से मेल नहीं खाता है (और खाली नहीं है या "शीर्ष") का एक ही प्रभाव होना चाहिए। - cHao
मैं आमतौर पर केवल एक निर्मित एंकर नाम का उपयोग करता हूं, लेकिन मुझे लगता है कि मैं अपने काम में लगातार होने के लिए ऐसा करना शुरू कर दूंगा। - Douglas.Sesar
मैंने स्थापना का सुझाव दिया #void अन्य टिप्पणी में वास्तव में सम्मेलन #self याद रखने के लिए छोटा और आसान है। कुछ भी बेहतर है # - jakub.g
लेकिन यदि आप उस लिंक पर क्लिक करते हैं तो उपयोगकर्ता को यूआरएल में "#void" देखने के लिए अजीब लगेगा, जैसा दिखता है और त्रुटि या बग, #self या जो भी हो। - pmirnd