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




(12)

जावास्क्रिप्ट के साथ "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>

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

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

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

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

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

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


जावास्क्रिप्ट के संदर्भ में, एक अंतर यह है कि 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>   

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

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

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

dojo.stopEvent(event);

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


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


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

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

खराब:

<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; });

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

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


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

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>

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


यह काम

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

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

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





javascript href