HTML एंकर लिंक - href और onclick दोनों?

Question

मैं एक एंकर टैग को लेखक करना चाहता हूं जो कुछ जावास्क्रिप्ट को निष्पादित करता है और फिर जहां hrefले जा रहा था वहां जाने के लिए आगे बढ़ता है। एक समारोह है कि मेरी जावास्क्रिप्ट और फिर सेट कार्यान्वित लागू window.locationया top.locationकरने के लिए hrefस्थान मेरे लिए काम नहीं करता।

तो, कल्पना कीजिए कि मेरे पास पृष्ठ पर आईडी "फू" के साथ एक तत्व है। मैं एक एंकर को लेखक के समान बनाना चाहता हूं:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

जब इसे क्लिक किया जाता है, तो मैं runMyFunction को निष्पादित करना चाहता हूं और फिर पृष्ठ को कूदना चाहता हूं #Foo(पुनः लोड करने का कारण नहीं है - इसका उपयोग top.locationकरने से पृष्ठ को फिर से लोड करना होगा)।

सुझाव? मैं jQuery का उपयोग करने के लिए खुश हूँ अगर यह यहाँ मदद कर सकता है ...

Comments

return true;समाधान है, लेकिन आप कॉल भी कर सकते हैं location.hash = '#Foo'। यह पृष्ठ को फिर से लोड नहीं करेगा।

— शुंग्भ्यभि

Answer 1

इसके return trueबजाय?

onClickकोड से रिटर्न वैल्यू वह है जो निर्धारित करता है कि लिंक की अंतर्निहित क्लिक की गई कार्रवाई संसाधित है या नहीं - लौटने का falseमतलब है कि यह संसाधित नहीं है, लेकिन यदि आप वापस लौटते हैं trueतो ब्राउज़र आपके फ़ंक्शन के वापस आने के बाद इसे संसाधित करने के लिए आगे बढ़ेगा और उचित पर जाएगा लंगर।

Comments

क्या होगा अगर onclick कुछ भी वापस नहीं करता है?

— Maciek

@maciek के बाद रिटर्न वैल्यू को माना जाता है undefinedजिसे इन उद्देश्यों के लिए गलत माना जाता है।

— एम्बर

अतीत में जब भी मैं एक नया पृष्ठ लॉन्च करने के लिए एक js फ़ंक्शन का उपयोग करूंगा, और href विशेषता के लिए सिर्फ "#" डालूंगा, मैं डिफ़ॉल्ट क्रिया को रोकने के लिए "-1" पर वापस आ जाऊंगा, जो आमतौर पर ब्राउज़र जंपिंग होता है उसे पृष्ठ के शीर्ष पर रखें, या कभी-कभी मैं कुछ भी वापस नहीं करूंगा। हाल ही में मुझे उन सभी पृष्ठों को संशोधित करना पड़ा है, जैसा कि @Amber ने सलाह दी है ... विशेष रूप से झूठे वापस आने के लिए, यदि मैं नहीं चाहता कि पृष्ठ कूद जाए।

— रैंडी

@ अगर ऐसा लगता है कि अगर ऑन्ग्लिक कुछ भी नहीं लौटाता है, तो लिंक की अंतर्निहित क्लिक कार्रवाई की जाएगी।

— iplus26

इसके अलावा, आपको ईवेंट हैंडलर पर event.preventDefault () का उपयोग नहीं करना चाहिए।

— रूबेन

Answer 2

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

तथा

function runMyFunction() {
  //code
  return true;
}

इस तरह से आपके पास youf फ़ंक्शन निष्पादित हो जाएगा और आप लिंक का अनुसरण करेंगे और आप अपने फ़ंक्शन को सफलतापूर्वक चलाने के बाद लिंक का पालन करेंगे।

Comments

यदि आपका कार्य किसी आस्थगित फ़ंक्शन कॉल के बाद सही होता है, तो यह काम नहीं करता है?

— डेविडवीड

Answer 3

यदि लिंक केवल स्थान को बदलना चाहिए यदि फ़ंक्शन रन सफल है, तो करें onclick="return runMyFunction();"और फ़ंक्शन में आप सही या गलत वापस आ जाएंगे।

यदि आप केवल फ़ंक्शन चलाना चाहते हैं, और फिर एंकर टैग को अपना काम करने दें, बस return falseस्टेटमेंट को हटा दें ।

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

Answer 4

स्वच्छ HTML संरचना करते समय, आप इसका उपयोग कर सकते हैं।

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>