javascript - Href बनाम onclick में जावास्क्रिप्ट फ़ंक्शन




(9)

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

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

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

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

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

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

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


ऐसा करने का सबसे अच्छा तरीका है:

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

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

dojo.stopEvent(event);

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


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


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

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>

यह कोड की इस पंक्ति का उपयोग कर मेरे लिए काम किया:

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

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


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

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


जावास्क्रिप्ट के संदर्भ में, एक अंतर यह है कि onclick हैंडलर में this कीवर्ड डीओएम तत्व को संदर्भित करेगा जिसका onclick विशेषता है (इस मामले में <a> तत्व), जबकि 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>

 <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>   







href