474

मैं बिना किसी पुनर्निर्देशन के एक क्लिक पर एक साधारण जावास्क्रिप्ट फ़ंक्शन चलाना चाहता हूं।

क्या hrefविशेषता में जावास्क्रिप्ट कॉल लगाने के बीच कोई अंतर या लाभ है (इस तरह:

<a href="javascript:my_function();window.print();">....</a>

) बनाम इसे onclickविशेषता में डालकर (इसे onclickघटना के लिए बाध्य करते हुए )?

javascript href

— SkunkSpinner
स्रोत

5

इस सवाल पर पहले चर्चा की गई है: stackoverflow.com/questions/245868/…

— SolutionYogi

1

और stackoverflow.com/questions/134845/…

— Sampson

276

Href के भीतर ऑन्कलिक लगाने से उन लोगों को नाराज किया जाएगा जो व्यवहार / कार्रवाई से सामग्री को अलग करने में दृढ़ता से विश्वास करते हैं। तर्क यह है कि आपकी html सामग्री केवल सामग्री पर केंद्रित होनी चाहिए, प्रस्तुति या व्यवहार पर नहीं।

इन दिनों विशिष्ट पथ एक जावास्क्रिप्ट पुस्तकालय (जैसे। jquery) का उपयोग करना और उस पुस्तकालय का उपयोग करके एक घटना हैंडलर बनाना है। यह कुछ इस तरह दिखेगा:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

— Parand
स्रोत

1

या जावास्क्रिप्ट पर प्रोटोटाइप, प्रोटोटाइप, डोजो ... या सादा, लेकिन यह एक पूरी बहुत अधिक कोड होगा लेकिन एक्सर्साइज़ के लायक होगा।

— रयान फ्लोरेंस

15

यदि आपको ईवेंट ऑब्जेक्ट के साथ कुछ भी करने की आवश्यकता नहीं है, तो सादे जावास्क्रिप्ट बहुत सरल है। Obj = document.getElementById () के साथ DOM नोड प्राप्त करें, फिर obj.onclick = foo

— मैट ब्रिज ब्रिज

1

पॉपअप विंडो में जब <a href> उत्पन्न होता है, तो फ्लाई, कहते हैं, और आपको अभी भी एक विशेष क्लिक व्यवहार की आवश्यकता होती है, तब सामग्री के अलगाव के बारे में क्या?

— सर्ज

6

लेकिन जेएस कॉल इनलाइन hrefबनाम इनलाइन डालने के बीच अंतर के बारे में सवाल नहीं पूछ रहा था onclick? यह मानते हुए कि आप इसे किसी कारण से इनलाइन डालने जा रहे हैं, जिसे आपको उपयोग करना चाहिए? (व्यवहार में मैं वही करूँगा जो आपने सुझाया है, लेकिन आपको लगता है कि आप दो विशेषताओं के बीच के अंतर को छोड़ देंगे।)

— nnnnnn

1

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

— मिस्टीडाउन

976

खराब:

<a id="myLink" href="javascript:MyFunction();">link text</a>

अच्छा:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

बेहतर:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

और भी बेहतर 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

और भी बेहतर 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

बेहतर क्यों? क्योंकि return falseब्राउज़र को लिंक का अनुसरण करने से रोक देगा

श्रेष्ठ:

तत्व की आईडी द्वारा ऑनक्लिक हैंडलर संलग्न करने के लिए jQuery या अन्य समान फ्रेमवर्क का उपयोग करें।

$('#myLink').click(function(){ MyFunction(); return false; });

— demp
स्रोत

21

एक और समाधान होगा जो सबसे अच्छा होगा जहां noJS ब्राउज़रों के लिए वास्तविक लिंक पर hrefसेट नहीं किया जाएगा #।

— helly0d

6

क्या होगा अगर मैं आपको बताता हूं कि पहला (बुरा) एक ही (दाएं) तरीके से मिडिलक्लिक के साथ सभी ब्राउज़रों में काम करता है।

— Vloxxity

14

<a id="myLink" href="javascript:MyFunction();"> के बारे में क्या बुरा है?

— वड़ादि कार्तिक

6

बस मेरा विनम्र 5 सेंट: "सबसे अच्छा" विकल्प क्लिक (ऑनक्लिक घटनाओं) के लिए बटन का उपयोग करना होगा और अपने href के साथ एंकर को छोड़ना होगा कि उनका मूल डिजाइन इरादा पहले स्थान पर क्या था: अन्य पृष्ठों के लिंक के लिए एंकर होना।

— 22

4

जावास्क्रिप्ट के साथ बंधन पर क्लिक करने पर एक नकारात्मक पहलू होता है: बाद में जब आपका कोई दूसरा किसी और के रूप में डिबगिंग कर रहा होता है, तो यह खोजना बहुत मुश्किल होता है कि जावास्क्रिप्ट किस तरह और किस तत्व से जुड़ा है।

— मार्टन कीफ़्ट सेप

69

के संदर्भ में जावास्क्रिप्ट , एक अंतर यह है कि है thisमें कीवर्ड onclickहैंडलर डोम तत्व जिसका उल्लेख करेंगे onclickविशेषता यह (इस मामले में है <a>, तत्व) जबकि thisमें hrefविशेषता के पास भेजेगा windowवस्तु।

प्रस्तुति के संदर्भ में , यदि कोई hrefविशेषता लिंक से अनुपस्थित है (यानी <a onclick="[...]">) तो, डिफ़ॉल्ट रूप से, ब्राउज़र textकर्सर प्रदर्शित करेगा (और अक्सर वांछित pointerकर्सर नहीं) क्योंकि यह <a>एक लंगर के रूप में व्यवहार कर रहा है , और लिंक नहीं।

व्यवहार के संदर्भ में , नेविगेशन के माध्यम से किसी क्रिया को निर्दिष्ट करते समय href, ब्राउज़र आमतौर पर hrefएक शॉर्टकट या संदर्भ मेनू का उपयोग करके एक अलग विंडो में खोलने का समर्थन करेगा । यह संभव नहीं है जब केवल किसी क्रिया को निर्दिष्ट किया जाए onclick।

हालाँकि, यदि आप पूछ रहे हैं कि DOM ऑब्जेक्ट के क्लिक से डायनेमिक एक्शन प्राप्त करने का सबसे अच्छा तरीका क्या है, तो दस्तावेज़ की सामग्री से अलग जावास्क्रिप्ट का उपयोग करके एक घटना को संलग्न करना सबसे अच्छा तरीका है। आप इसे कई तरीकों से कर सकते हैं। एक घटना को बाँधने के लिए jQuery जैसी जावास्क्रिप्ट लाइब्रेरी का उपयोग करने का एक सामान्य तरीका है:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

— एडम
स्रोत

9

मेरे संदेह की पुष्टि करने के लिए धन्यवाद कि "यह" "href" बनाम "ऑनक्लिक" में भिन्न है।

— joonas.fi

17

मैं उपयोग करता हूं

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

एक लंबा रास्ता है लेकिन यह काम हो जाता है। सरल बनाने के लिए एक शैली का उपयोग करें तो यह बन जाता है:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

— क्लिफ कॉलिन्स
स्रोत

10

+1 वास्तव में महान! :-) मैंने पहले कभी nohrefविशेषता के बारे में नहीं सुना था । इस तरह के जावास्क्रिप्ट कार्यों को संभालने के लिए यह सबसे तार्किक / सुरुचिपूर्ण तरीका है। यह FF12 और IE8 के साथ संगत है। इसलिए मैं सभी मेरी जगह लेगा href="JavaScript:void(0);"द्वारा nohref। बहुत बहुत धन्यवाद। चीयर्स।

— ओलिबर

7

यह प्रमुख ब्राउज़रों द्वारा समर्थित नहीं है, हमें इसका उपयोग क्यों करना चाहिए? w3schools.com/tags/att_area_nohref.asp

— hetaoblog

11

nohrefareaटैग का एक हिस्सा है , नहीं a! आपका उदाहरण समान है<a onClick="alert('Hello World')">HERE</a>

— nZeus

6

बस एक और "यह चेतावनी नहीं है"। यह पूरी तरह से गैर-मानक और बुरी सलाह है। nohrefएक aटैग पर मौजूद नहीं है ।

— कॉलिन 'टी हार्ट हार्ट

11

यहाँ सभी के अलावा, href ब्राउज़र के स्टेटस बार पर दिखाया गया है, और ऑनक्लिक नहीं। मुझे लगता है कि यह जावास्क्रिप्ट कोड दिखाने के लिए उपयोगकर्ता के अनुकूल नहीं है।

— Kamarey
स्रोत

10

इसके साथ सबसे अच्छा तरीका है:

<a href="#" onclick="someFunction(e)"></a>

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

dojo.stopEvent(event);

ऐसा करने के लिए।

— linusthe3rd
स्रोत

9

मैं चेतावनी देना चाहूंगा कि यदि आप href="#"ब्राउज़र का उपयोग करते हैं तो एक नामित एंकर टैग की तलाश करेंगे और चूंकि यह नहीं मिलेगा, तो यह पृष्ठ के शीर्ष पर स्क्रॉल करने के लिए विंडो बना देगा, कुछ ऐसा जो ध्यान देने योग्य नहीं हो सकता है आप पहले से ही शीर्ष पर हैं। इस व्यवहार के उपयोग से बचने के लिए: href="javascript:;"इसके बजाय।

— alonso.torres

1

@ alonso.torres अच्छा बिंदु है, लेकिन इसीलिए मैंने dojo.stopEvent () का उपयोग करने का उल्लेख किया है - यह ईवेंट के प्रचार / बुब्बलिंग और एंकर पर क्लिक करने के डिफ़ॉल्ट व्यवहार को रोक देगा।

— linusthe3rd

7

रुकने के बजाय, केवल झूठे क्यों नहीं (onclick = "someFunction (e); झूठे लौटें?")

— stracktracer

10

शीर्ष उत्तर एक बहुत बुरा अभ्यास है, किसी को कभी भी एक खाली हैश से लिंक नहीं करना चाहिए क्योंकि यह सड़क के नीचे समस्याएं पैदा कर सकता है।

तत्व को एक घटना हैंडलर को बांधना है, जैसा कि कई अन्य लोगों ने कहा है, हालांकि, <a href="javascript:doStuff();">do stuff</a>हर आधुनिक ब्राउज़र में पूरी तरह से काम करता है, और मैं इसका उपयोग बड़े पैमाने पर करता हूं जब प्रत्येक उदाहरण के लिए रिबेंड होने से बचने के लिए टेम्पलेट्स प्रदान करता हूं। कुछ मामलों में, यह दृष्टिकोण बेहतर प्रदर्शन प्रदान करता है। YMMV

एक और दिलचस्प टिड-बिट ...।

onclick& hrefजावास्क्रिप्ट को सीधे कॉल करते समय अलग-अलग व्यवहार होते हैं।

onclickthisसंदर्भ को सही ढंग से पारित करेंगे , जबकि hrefनहीं, या दूसरे शब्दों में <a href="javascript:doStuff(this)">no context</a>काम नहीं करेगा, जबकि <a onclick="javascript:doStuff(this)">no context</a>होगा।

हां, मैंने छोड़ दिया href। हालांकि यह युक्ति का पालन नहीं करता है, यह सभी ब्राउज़रों में काम करेगा, हालांकि, आदर्श रूप से इसे href="javascript:void(0);"अच्छे उपाय के लिए शामिल किया जाना चाहिए

— एडुआर्डो
स्रोत

8

बीत रहा है javascript:किसी भी विशेषता है कि पटकथा के लिए विशेष रूप नहीं है में HTML का एक पुराना तरीका है। जबकि तकनीकी रूप से यह काम करता है, आप अभी भी एक गैर-स्क्रिप्ट विशेषता के लिए जावास्क्रिप्ट गुण प्रदान कर रहे हैं, जो अच्छा अभ्यास नहीं है। यह पुराने ब्राउज़रों पर भी विफल हो सकता है, या यहां तक कि कुछ आधुनिक लोगों (एक गुगली मंच फोरम पोस्ट को इंगित करता है कि ओपेरा 'जावास्क्रिप्ट:' यूआरएल 'पसंद नहीं करता है।

एक बेहतर अभ्यास दूसरा तरीका होगा, अपनी जावास्क्रिप्ट को onclickविशेषता में डालने का , जिसे कोई स्क्रिप्टिंग कार्यक्षमता उपलब्ध नहीं होने पर अनदेखा कर दिया जाता है। उन लोगों के लिए गिरावट के लिए href फ़ील्ड (आमतौर पर '#') में एक मान्य URL रखें, जिनके पास जावास्क्रिप्ट नहीं है।

— zombat
स्रोत

1

मैं यह नहीं देखता कि कैसे एक 'जावास्क्रिप्ट:' href और '#' href के बीच ऑनक्लिक विशेषता के बीच कोई अंतर है। जेएस सक्षम के बिना ब्राउज़र के लिए दोनों समान रूप से बेकार हैं।

— harto

2

harto, यह वास्तव में सही नहीं है। '#' नामांकित लिंक के लिए एक संकेतक है, यह एक जावास्क्रिप्ट पहचानकर्ता नहीं है। यह एक मान्य URL है, और जावास्क्रिप्ट को पहचानने की आवश्यकता नहीं है।

— ज़ोम्बैट

8

इस कोड की लाइन का उपयोग करके मेरे लिए काम किया:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

— उमर यसिन कारसेलेन
स्रोत

7

यह काम

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

— TitusMix
स्रोत

3

ढेर अतिप्रवाह में आपका स्वागत है! हालांकि यह कोड स्निपेट प्रश्न को हल कर सकता है, जिसमें स्पष्टीकरण सहित वास्तव में आपकी पोस्ट की गुणवत्ता में सुधार करने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है। कृपया अपने कोड को व्याख्यात्मक टिप्पणियों के साथ भीड़ न दें, क्योंकि इससे कोड और स्पष्टीकरण दोनों की पठनीयता कम हो जाती है!

— गुडबाय StackExchange

2

यह कोड काम नहीं करता है। वापसी: गलत अमान्य है। इसे गलत लौटाया जाना चाहिए।

— हुबेंस

5

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

— पीटर
स्रोत

3

जावास्क्रिप्ट के साथ "href" का उपयोग करते समय एक और बात जो मैंने देखी:

"Href" विशेषता की स्क्रिप्ट को निष्पादित नहीं किया जाएगा यदि 2 क्लिकों के बीच का समय अंतर काफी कम था।

उदाहरण के लिए, प्रत्येक लिंक पर निम्न उदाहरण और डबल क्लिक (तेज़!) को चलाने का प्रयास करें। पहले लिंक को केवल एक बार निष्पादित किया जाएगा। दूसरी कड़ी को दो बार निष्पादित किया जाएगा।

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

क्रोम में दोहराए गए (डबल क्लिक) और IE11 (ट्रिपल क्लिक के साथ)। Chrome में यदि आप पर्याप्त तेज़ी से क्लिक करते हैं तो आप 10 क्लिक कर सकते हैं और केवल 1 फ़ंक्शन निष्पादित कर सकते हैं।

फ़ायरफ़ॉक्स ठीक काम करता है।

— kolobok
स्रोत

3

सबसे पहले, url का hrefहोना सबसे अच्छा है क्योंकि यह उपयोगकर्ताओं को लिंक कॉपी करने, दूसरे टैब में खोलने, आदि की अनुमति देता है।

कुछ मामलों में (उदाहरण के लिए लगातार HTML परिवर्तन वाली साइटें) हर बार अपडेट होने पर लिंक को बांधना व्यावहारिक नहीं है।

ठेठ बाँध विधि

सामान्य लिंक:

<a href="https://www.google.com/">Google<a/>

और जेएस के लिए कुछ इस तरह:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

इस पद्धति के लाभ मार्कअप और व्यवहार के स्वच्छ पृथक्करण हैं और प्रत्येक लिंक में फ़ंक्शन कॉल को दोहराना नहीं है।

कोई बाँध विधि नहीं

यदि आप हर बार बांधना नहीं चाहते हैं, तो आप तत्व और ईवेंट में ऑनक्लिक और पास का उपयोग कर सकते हैं, जैसे:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

और यह जेएस के लिए:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

इस पद्धति का लाभ यह है कि आप हर बार बाइंडिंग के बारे में चिंता किए बिना नए लिंक (जैसे AJAX के माध्यम से) में लोड कर सकते हैं।

— jchavannes
स्रोत

1

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>

— एंड्रयू
स्रोत

0

मैंने अनुभव किया कि जावास्क्रिप्ट: hrefs ने तब काम नहीं किया जब पृष्ठ आउटलुक के वेबपेज फीचर में एम्बेड किया गया था जहां एक मेल फ़ोल्डर के बजाय एक यूआरएल दिखाने के लिए सेट किया गया है

— ईसाई
स्रोत

जावास्क्रिप्ट समारोह में href बनाम onclick

ठेठ बाँध विधि

कोई बाँध विधि नहीं