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

Question

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

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>

Comments

जब तक मैं कुछ याद कर रहा हूँ, <a href="javascript:void(0)" onclick="myJsFunc();">बिल्कुल कोई मतलब नहीं है। यदि आपको psuedo-प्रोटोकॉल का उपयोग करना चाहिएjavascript: , तो आपको onclickविशेषता की भी आवश्यकता नहीं है । <a href="javascript:myJsFunc();">बस ठीक कर देंगे।

— वेस्ले मर्च

@WesleyMurch - यदि myJsFunc()कोई वापसी मान है, तो आपका पृष्ठ टूट जाएगा। jsfiddle.net/jAd9G आप अभी भी इस voidतरह का उपयोग करना होगा <a href="javascript:void myJsFunc();">:। लेकिन फिर, व्यवहार अभी भी अलग होगा। संदर्भ मेनू के माध्यम से लिंक को आमंत्रित करना clickघटना को ट्रिगर नहीं करता है ।

— gilly3

सिर्फ क्यों नहीं <a href="javascript:;" onclick="myEvent()"?

— 3k- 12

javascript:;टाइप करने के लिए बहुत तेज हैjavascript:void(0)

— माइक कॉसर

यह देखते समय पहले सोचा: "आप एक <a>टैग का उपयोग क्यों करेंगे यदि आप जो करना चाहते हैं वह देशी ब्राउज़र सुविधा के माध्यम से एक और पृष्ठ खोलने के लिए नहीं है, बल्कि कुछ जावास्क्रिप्ट 'कार्रवाई' को ट्रिगर करना है? बस spanएक वर्ग के साथ एक टैग का उपयोग करके? js-triggerशायद ज्यादा बेहतर होगा ”। या क्या मैं कुछ न कुछ भूल रहा हूं?

— बी

Answer 1

मैं उपयोग करता हूं 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)"

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

Comments

मैं हमेशा हर लिंक को एक नए टैब में खोलता हूं और यही कारण है कि मैं व्यक्तिगत रूप से नफरत करता हूं जब लोग href="javascript:void(0)"विधि का उपयोग करते हैं

— टिमो हुओवेंन

खेद असहमत है कि इस उत्तर में इतने उत्थान क्यों हैं? किसी भी प्रयोग को javascript:बुरा व्यवहार, आज्ञाकारी माना जाना चाहिए और यह सुंदर ग्रेड नहीं है।

— लंकिमार्ट जूले

अगले दो उत्तर इस से कहीं बेहतर और उचित हैं। साथ ही पहले दो तर्क अमान्य हैं क्योंकि event.preventDefault()डिफ़ॉल्ट व्यवहार को रोकने के लिए ठीक है (जैसे इस मामले में पृष्ठ के शीर्ष पर कूदना) और सभी return false;पागलपन के बिना इस पर बेहतर काम करें ।

— सूदी

2013 में फास्ट-फॉरवर्ड: CSP- सक्षम HTTPS पृष्ठों पर सामग्री सुरक्षा नीतिjavascript:void(0) का उल्लंघन । एक विकल्प तो उपयोग करने के लिए और हैंडलर में होगा, लेकिन मुझे यह पसंद नहीं है। शायद आप यह सुनिश्चित करने के लिए एक कन्वेंशन स्थापित कर सकते हैं कि पृष्ठ पर कोई तत्व नहीं है । इस तरह, गैर-मौजूदा एंकर के लिंक पर क्लिक करने से पेज स्क्रॉल नहीं होगा। href='#'event.preventDefault()href='#void'id="void"

— jakub.g

आप "#" का उपयोग कर सकते हैं और फिर "#" के साथ सभी लिंक के लिए एक क्लिक ईवेंट को बाँध सकते हैं href। यह jQuery के साथ किया जाएगा:$('a[href="#"]').click(function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; });

— नाथन

Answer 2

न तो।

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

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

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

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

Comments

क्या आप इस बात का उदाहरण दे सकते हैं कि कोई "एंकर टैग को जावास्क्रिप्ट और उचित क्लिक इवेंट हैंडलर के साथ दस्तावेज़ में कैसे इंजेक्ट कर सकता है"?

— user456584

एंकर टैग को सभी पर क्यों इंजेक्ट करें यदि इसका उपयोग केवल एक तत्व को क्लिक करने की अनुमति देने के लिए किया जाता है तो "बी" क्लिक करें "सूचक" कर्सर प्रदर्शित करें। इस परिदृश्य में एक एंकर टैग को इंजेक्ट करना भी अप्रासंगिक लगता है।

— क्रश करें

न तो के लिए +1, लेकिन अधिक दृष्टिकोण हैं। तथ्य javascript:या तो उपयोग के बने रहते हैं या #दोनों खराब प्रथाओं के होते हैं और उन्हें प्रोत्साहित नहीं किया जाता है। अच्छा लेख बी.टी.वी.

— लंकिमार्ट

@ क्रश: मैं एक div या स्पान का उपयोग नहीं करेगा; स्पष्ट रूप से, ऐसा लगता है जैसे बहुत ही चीज़ के <button>लिए बनाया गया था। लेकिन सहमत: यह शायद विशेष रूप से नहीं होना चाहिए <a>अगर लिंक करने के लिए इसके लिए कोई उपयुक्त जगह नहीं है।

— cHao

@cHao बटन शायद सबसे अच्छा विकल्प है। मुझे लगता है कि मुख्य तत्व यह है कि HTML तत्व को उसकी डिफ़ॉल्ट प्रस्तुति उपस्थिति के आधार पर नहीं चुना जाना चाहिए, बल्कि दस्तावेज़ की संरचना के लिए इसका महत्व है।

— क्रश

Answer 3

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

टिप्पणियाँ

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

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

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

Comments

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

— थॉमस डेविस

खबरदार: buttonयहां सुझाए गए लिंक-स्टाइल दृष्टिकोण ने IE9 और निम्न में अपरिवर्तनीय "3 डी" सक्रिय स्थिति से ग्रस्त है ।

— ब्रेनन रॉबर्ट्स

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

— जॉर्डन रेजर

उन सभी "नोटों" के साथ जिन्हें हल करना मुश्किल है (एक टैलिंडेक्स स्थापित करना एक जटिल पृष्ठ पर परेशानी के लिए पूछ रहा है!)। बस करना बेहतर है javascript:void(0)। यह व्यावहारिक उत्तर है, और वास्तविक दुनिया में एकमात्र समझदार उत्तर है।

— अभि बेकर्ट

यदि आप अपने वेब एप्लिकेशन को सुलभ (और आपको चाहिए) बनाने की परवाह करते हैं, तो सादगी और पवित्रता href के लिए तर्क देती है। पागलपन वर्जना की दिशा में निहित है।

— जेकडे

Answer 4

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

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

Comments

इससे बचने का तरीका है कि ऑनक्लिक ईवेंट हैंडलर में झूठा लौटना।

— ग्वेंटे

ईवेंट हैंडलर के झूठे होने से यह नहीं बचता है कि यदि जावास्क्रिप्ट जेएस सफलतापूर्वक नहीं चलता है।

— क्वेंटिन

"#someNonExistantAnchorName" का उपयोग करना अच्छी तरह से काम करता है क्योंकि इसमें कहीं भी कूदना नहीं है।

— स्कूपलिफ़

आप एक आधार href है, तो #या #somethingआपको लगता है कि लंगर के पास ले जाएगा आधार href पर पेज, बजाय वर्तमान पृष्ठ पर की।

— अभि बेकर्ट

शेबंग ( #!) चाल चलता है, लेकिन यह निश्चित रूप से बुरा अभ्यास है।

— नील

Answer 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 को असाइन कर सकते हैं। मैं स्क्रिप्ट के माध्यम से बाध्यकारी का सुझाव देता हूं, onclickतत्व टैग पर विशेषता का उपयोग नहीं कर रहा हूं । एकमात्र IEcha पुराने IE में psuedo 3D प्रभाव है जिसे अक्षम नहीं किया जा सकता है।

---

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

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

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

Comments

IE8 / IE9 में, मैं बटन की: सक्रिय अवस्था में 1px "3 डी" ऑफसेट को हटाने में असमर्थ हूं।

— ब्रेनन रॉबर्ट्स

@BrennanRoberts हाँ, दुर्भाग्य से, बटन की कोई स्टाइलिंग IE के साथ अधिक समस्याग्रस्त है ... मुझे अभी भी लगता है कि यह शायद सबसे उपयुक्त दृष्टिकोण है, न कि मैं इस अवसर पर अपने स्वयं के नियमों को नहीं तोड़ता।

— ट्रैकर 1

तो फिर <button>एक का उपयोग नहीं करते input type=button?

— पेट्रिक एफेप्रेंसर

फिर एक <clickable>तत्व का उपयोग करें । या <clickabletim>यदि आप पसंद करते हैं दुर्भाग्य से, एक गैर-मानक टैग या एक सादे div का उपयोग करने से कीबोर्ड उपयोगकर्ताओं के लिए तत्व को केंद्रित करना मुश्किल हो सकता है।

— joeytwiddle

यह उत्तर ऊपर होना चाहिए। यदि आप इस दुविधा में हैं, तो संभावना है कि आप वास्तव में एक की जरूरत है button। और IE9 जल्दी से बाजार के शेयरों को खो रहा है, सौभाग्य से, और 1px सक्रिय प्रभाव हमें सिमेंटिक मार्कअप का उपयोग करने से नहीं रोकना चाहिए। <a>एक कड़ी है, यह आपको कहीं न कहीं भेजने के लिए है, जिन कार्यों के लिए हमारे पास है <button>।

— mjsarfatti

Answer 6

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

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

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

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

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

Comments

तो जावास्क्रिप्ट के साथ उपयोगकर्ता एजेंटों में सक्षम और फ़ंक्शन ने इस जावास्क्रिप्ट का समर्थन किया, पृष्ठ के शीर्ष पर एक लिंक के लिए वापस गिरने (उपयोगकर्ता एजेंटों के लिए जहां जेएस किसी भी कारण से विफल रहता है) के लिए एक जावास्क्रिप्ट फ़ंक्शन चलाते हैं? यह शायद ही कभी एक समझदार वापसी है।

— क्वेंटिन

"उपयोगकर्ता द्वारा जावास्क्रिप्ट अक्षम होने की स्थिति में अनुसरण करने के लिए एक वास्तविक लिंक के साथ आदर्श रूप से", यह एक उपयोगी पृष्ठ पर जाना चाहिए # नहीं, भले ही यह सिर्फ एक स्पष्टीकरण हो कि साइट को काम करने के लिए JS की आवश्यकता है। असफल होने के लिए, मैं उम्मीद करूंगा कि डेवलपर को तैनात करने से पहले उचित ब्राउज़र फीचर डिटेक्शन आदि का उपयोग करना चाहिए।

— Zach

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

— ब्रायन मोसकाऊ

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

— Zach

समस्या यह है कि यदि myJsFunc एक त्रुटि फेंकता है, तो इसे गलत रिटर्न के लिए कैप्चर नहीं किया जाएगा।

— ट्रैकर 1

Answer 7

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

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

Comments

यह दृष्टिकोण केवल माउस के ऑपरेशन के लिए 'लिंक' को प्रतिबंधित करता है। एक एंकर को कीबोर्ड के माध्यम से देखा जा सकता है और एंटर कुंजी दबाए जाने पर इसकी 'ऑनक्लिक' घटना को निकाल दिया जाता है।

— एंथनीवजोन

आपके सीएसएस में हार्डकोडिंग रंग उपयोगकर्ता को परिभाषित किए जाने वाले कस्टम रंगों का उपयोग करने से रोक सकते हैं, जो एक्सेसिबिलिटी की समस्या हो सकती है।

— होसम ऐली

<span>s कुछ भी करने के लिए नहीं हैं। <A>nchors और <buttons>उस के लिए उपयोग किया जाता है!

— RedShadow

उपयोग करना buttonsएक बेहतर विकल्प है जबकि उपयोग spanनहीं है।

— क्षमा करें

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

— निब्लीपिग

Answer 8

आदर्श रूप से आप ऐसा करेंगे:

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

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

Answer 9

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

Comments

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

— alonso.torres

संदर्भ के लिए, #selfविशेष प्रतीत नहीं होता है। कोई भी टुकड़ा पहचानकर्ता जो दस्तावेज़ में किसी भी तत्व के नाम या आईडी से मेल नहीं खाता (और रिक्त या "शीर्ष" नहीं है) का समान प्रभाव होना चाहिए।

— cHao

मैं आमतौर पर केवल एक लंगर नाम का उपयोग करता हूं, लेकिन मुझे लगता है कि मैं अपने काम के अनुरूप होने के लिए ऐसा करना शुरू कर दूंगा।

— डगलस। सिसर

मैंने #voidदूसरी टिप्पणी में सम्मेलन की स्थापना का सुझाव दिया, लेकिन वास्तव #selfमें याद रखना उतना ही छोटा और आसान है। कुछ भी बेहतर है#

— jakub.g

लेकिन अगर आप उस लिंक पर क्लिक करते हैं, तो उपयोगकर्ता को url में "#void" देखने में अजीब लगेगा, ऐसा लगता है कि त्रुटि और बग, समान रूप से # स्वयं या जो भी हो।

— २१:०५ पर पीरंदा

Answer 10

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

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

बजाय

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

Comments

मैं उपयोग करता हूं javascript:(कोई अर्ध-उपनिवेश नहीं) क्योंकि यह होवर पर स्टेटस बार में सबसे खराब दिखता है।

— बून

यह कोड पुराने IE में खराब आश्चर्य का कारण हो सकता है। कुछ बिंदु पर यह रोलओवर और यहां तक ​​कि एनिमेटेड gifs सहित छवियों के साथ किसी भी एनीमेशन प्रभाव को तोड़ने के लिए उपयोग किया जाता है: group.google.com/umum/##topic/comp.lang.javascript/…

— Ilya Streltsyn

आप हमेशा ऐसा कर सकते हैं ... javascript:void('Do foo')चूँकि शून्य अपरिभाषित लौट आएगा, यह उपयोगकर्ता को एक संकेतक देगा कि क्लिक क्या करेगा। आप जहां Do fooचाहें Delete record Xया जैसे भी हो सकते हैं।

— ट्रैकर

Answer 11

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

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

बहुत ही सरल उपाय है। 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तो यह वापस आ जाएगा , इसलिए इसे नकारात्मक ( false) और path/to/some/URLवसीयत नहीं कहा जाएगा। यदि फ़ंक्शन वापस आ जाएगा false(उदाहरण के लिए, ब्राउज़र फ़ंक्शन के भीतर उपयोग की जाने वाली किसी चीज़ का समर्थन नहीं करता है या कुछ और गलत हो जाता है), तो इसे नकार दिया जाता है trueऔर path/to/some/URLइसे कहा जाता है।

Answer 12

#से बेहतर है 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 में सीधे जावास्क्रिप्ट विशेषताओं और प्रोटोकॉल का उपयोग करने के लिए बुरा रूप माना जाता है।

Comments

@Muhd: वापसी को सक्रिय करना चाहिए clickलिंक पर ...

— Ry-

Answer 13

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

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

Comments

मुझे भी लगता है कि यह सबसे अच्छा उपाय है। यदि आपके पास एक तत्व है जो किसी कार्य को करने के लिए है, तो इसका कोई कारण नहीं है कि यह एक लिंक हो।

— mateuscb

क्या आप पूछ रहे थे और आपका href "#something" जैसा प्रतीत होता है, कुछ अन्य सूचीबद्ध उत्तर सेवा कर सकते हैं, लेकिन: बिना href के कुछ भी समझदार होने से जोड़ने के लिए, href होने या पूरी तरह से लिंक होने का कोई मतलब नहीं है। बटन का सुझाया गया उपयोग किसी अन्य तत्व का उपयोग या कर सकता है, लेकिन एक लिंक लिंक कहीं नहीं।

— कांटूर

इसका एक और फायदा यह है कि बूटस्ट्रैप .btnबटन बनाता है और लिंक बिल्कुल समान दिखते हैं।

— सिरो सेंटिल्ली 冠状 i i i 法轮功 '19

उपयोगकर्ता के नजरिए से, buttonURL में एक # भी परिचय नहीं देता है या aजावास्क्रिप्ट को जावास्क्रिप्ट के रूप में दिखाता है :;

— Coll

Answer 14

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

Answer 15

निश्चित रूप से हैश ( #) बेहतर है क्योंकि जावास्क्रिप्ट में यह एक छद्म विषय है:

1. इतिहास को प्रदूषित करता है
2. इंजन की नई प्रति तत्काल देता है
3. वैश्विक दायरे में चलता है और ईवेंट सिस्टम का सम्मान नहीं करता है।

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

इसके अलावा, काउगॉड के सुझाव के बारे में, विशेष रूप से यह: ...href="javascript_required.html" onclick="...यह अच्छा तरीका है, लेकिन यह "जावास्क्रिप्ट अक्षम" और "ऑनक्लिक विफल" परिदृश्यों के बीच अंतर नहीं करता है।

Comments

@ बर्क युसेर, सीडब्ल्यू क्यों?

— मुफ्त परामर्श

Answer 16

मैं आमतौर पर जाता हूं

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

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

Answer 17

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

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

कारण:

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

Comments

मैं "1." से सहमत नहीं हूँ जब स्क्रिप्ट की अनुमति नहीं होती है तो यह उर स्क्रिप्ट लिंक डालते समय त्रुटि देता है। ताकि js कोड के साथ इस तरह के लिंक जुड़ जाएं। इस तरह से लोग उन लिंक से बच सकते हैं जबकि स्क्रिप्ट की अनुमति नहीं है और कोई त्रुटि नहीं देखते हैं।

— बर्क युसेर

Answer 18

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

Answer 19

तो, जब आप कुछ जावास्क्रिप्ट चीजों के साथ कर रहे हैं a <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="#"। उसके लिए, मुझे लगता है कि आप इसके लिए CSS का उपयोग कर सकते हैं जैसे cursor:pointer;कि यह समस्या हल करती है।

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

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

Answer 20

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

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

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

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

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

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Comments

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

— क्वेंटिन

टन क्वेंटिन की टिप्पणी को जोड़ना: जैसा कि वर्तमान में लिखा गया है, कीबोर्ड उपयोगकर्ता spanतत्व तक नहीं पहुंचेंगे क्योंकि यह एक गैर-केंद्रित तत्व है। इसलिए आपको एक बटन की आवश्यकता है।

— त्सुंडोकू

आप tabindex="0"स्पैन में जोड़कर इसे फोकस कर सकते हैं । उस ने कहा, बटन का उपयोग करना बेहतर है क्योंकि यह आपको मुफ्त में वांछित कार्यक्षमता प्रदान करता है। एक स्पैन का उपयोग करके इसे सुलभ बनाने के लिए आपको न केवल एक क्लिक हैंडलर संलग्न करने की आवश्यकता है, बल्कि एक कीबोर्ड ईवेंट हैंडलर जो स्पेस बार के प्रेस को देखता है या कुंजी दर्ज करता है और फिर सामान्य क्लिक हैंडलर को फायर करता है। आप दूसरे सीएसएस चयनकर्ता को .funcActuator:hover, .funcActuator:focusइस तथ्य से बदलना भी चाहेंगे कि तत्व का ध्यान केंद्रित हो।

— बेकार कोड

Answer 21

JQuery का उपयोग करना बेहतर होगा,

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

और दोनों को छोड़ दें href="#"औरhref="javascript:void(0)" ।

एंकर टैग मार्कअप की तरह होगा

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

काफी सरल!

Comments

मैं यही कहने जा रहा था। यदि किसी लिंक में फ़र्कबैक url है जो समझ में आता है, तो उसका उपयोग करें। अन्यथा, बस href को छोड़ दें या किसी <a> से अधिक उपयुक्त शब्द का उपयोग करें। यदि केवल एक ही कारण कि हर कोई href सहित वकालत कर रहा है, तो होवर पर उंगली उठानी है, एक सरल "a {कर्सर: पॉइंटर;}" ट्रिक देगा।

— मैट कंटर

यह भयानक पहुँच देता है। इसे SO में आज़माएं: आप माउस का उपयोग किए बिना किसी पोस्ट को फ़्लैग नहीं कर सकते। "लिंक" और "संपादित करें" लिंक टैबिंग द्वारा सुलभ हैं, लेकिन "ध्वज" नहीं है।

— निकोलस

मैं इस विकल्प से सहमत हूं। यदि एंकर के पास जावास्क्रिप्ट के अलावा कोई उद्देश्य नहीं है, तो उसके पास एक href नहीं होना चाहिए। @Fatih: jQuery का उपयोग करने का अर्थ है कि यदि जावास्क्रिप्ट अक्षम है, तो लिंक में पॉइंटर नहीं होगा।

— स्कॉट रिपी

यदि आप इस मार्ग पर जा रहे हैं, तो jQuery का उपयोग करके क्लिक को क्यों न बांधें? JQuery का उपयोग करने के बारे में महान बात का हिस्सा आपके मार्कअप से आपके जावास्क्रिप्ट को अलग करने की क्षमता है।

— मुहम्मद

मुझे विश्वास नहीं हो रहा है कि इस जवाब में 11 वोट हैं। यह भयंकर है। आप जावास्क्रिप्ट (और jQuery ??) के माध्यम से एक शैली क्यों जोड़ रहे हैं, और फिर HTML में अपनी ऑनक्लिक कार्रवाई को परिभाषित कर रहे हैं? भयानक।

— एमएमएम

Answer 22

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

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

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

के अतिरिक्त

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

Comments

लेकिन इससे पृष्ठ पुनः लोड हो जाएगा, और चूंकि हम पृष्ठ को संशोधित करने के लिए हमेशा जावास्क्रिप्ट का उपयोग कर रहे हैं, यह अस्वीकार्य है।

— हेनरी हू

@ हेनरीहु ने मुझे पता लगाया कि इसका कारण एंगुलरजेएस नहीं था। देखिये मेरा अपडेटेड जवाब।

— whirlwin

Answer 23

अगर वहाँ कोई नहीं है href नहीं है, तो एंकर टैग का उपयोग करने का कोई कारण नहीं है।

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

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

Answer 24

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

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

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

Answer 25

मैं व्यक्तिगत रूप से संयोजन में उनका उपयोग करता हूं। उदाहरण के लिए:

एचटीएमएल

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

---

थोड़ा सा jQuery के साथ

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

या

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

लेकिन मैं इसका उपयोग सिर्फ पेज को शीर्ष पर जाने से रोकने के लिए कर रहा हूं, जब उपयोगकर्ता खाली एंकर पर क्लिक करता है। मैं शायद ही कभी onClick और अन्य का उपयोग कर रहा हूंon HTML में घटनाओं ।

मेरा सुझाव एंकर के बजाय विशेषता के <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
});

---

फिर आप एक छोटे सीएसएस के साथ एंकर की तरह दिखने के लिए स्पैन एलिमेंट को स्टाइल कर सकते हैं:

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

यहाँ aforementioned के ऊपर का jsFiddle उदाहरण है।

Answer 26

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

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

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

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

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

Comments

इस के साथ नकारात्मक पक्ष केवल (स्मृति से, मैं गलत हो सकता है) यह है कि यदि आप इसके अंदर एक href नहीं है तो IE A को A नहीं मानता है। (इसलिए सीएसएस नियम काम नहीं करेगा)

— बेंजोल

Answer 27

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

फिर 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>

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

Answer 28

मेरा मानना ​​है कि आप एक गलत द्वैतवाद प्रस्तुत कर रहे हैं। ये केवल दो विकल्प नहीं हैं।

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

Comments

इसके अलावा, यदि आप एक के aसाथ बदलने के लिए थे span, तो आपको इसे कीबोर्ड के माध्यम से ध्यान केंद्रित करने के लिए याद रखना होगा।

— एंडिफ़र

Answer 29

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

Comments

वास्तव में वे ऐसा नहीं करते हैं। # आपको पेज के ऊपर कूदने देता है।

— जोचन

Answer 30

मैं मूल रूप से इस व्यावहारिक लेख से प्रगतिशील वृद्धि का उपयोग कर रहा हूँ । संक्षिप्त उत्तर यह है कि आप कभी भी उपयोग नहीं करते हैं javascript:void(0);या #जब तक आपका उपयोगकर्ता इंटरफ़ेस पहले से अनुमान नहीं करता है कि जावास्क्रिप्ट सक्षम है, जिस स्थिति में आपको उपयोग करना चाहिएjavascript:void(0); । इसके अलावा, स्पैन को लिंक के रूप में उपयोग न करें, क्योंकि यह शुरू करने के लिए शब्दार्थ से असत्य है।

अपने एप्लिकेशन में एसईओ अनुकूल URL मार्गों का उपयोग करना , जैसे कि / होम / एक्शन / पैरामीटर्स एक अच्छा अभ्यास है। यदि आपके पास ऐसे पृष्ठ का लिंक है जो पहले जावास्क्रिप्ट के बिना काम करता है, तो आप बाद में अनुभव बढ़ा सकते हैं। एक कामकाजी पृष्ठ के लिए एक वास्तविक लिंक का उपयोग करें, फिर प्रस्तुति को बढ़ाने के लिए एक ऑनलिंक घटना जोड़ें।

यहाँ एक नमूना है। Home / ChangePicture यूजर इंटरफेस और मानक 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>

Comments

एसईओ के कार्यकाल में मैं इस तरह से पसंद करेंगे। कई अनुकूल URL का उपयोग करने से निश्चित रूप से पृष्ठ मूल्य कारक में सुधार होगा।

— चेतबहना