ما قيمة "href" التي ينبغي استخدامها في روابط جافا سكريبت "#" أو "javascript: void(0)"؟




html performance (20)

فيما يلي طريقتان لإنشاء رابط له غرض وحيد هو تشغيل شفرة JavaScript. أيهما أفضل ، من حيث الأداء الوظيفي ، سرعة تحميل الصفحة ، أغراض التحقق ، وما إلى ذلك؟

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>


أنا أستخدم javascript:void(0) .

ثلاثة أسباب. إن تشجيع استخدام # من بين فريق من المطورين يؤدي حتمًا إلى استخدام البعض لقيمة الإرجاع للدالة المسماة مثل:

function doSomething() {
    //Some code
    return false;
}

ولكن بعد ذلك ينسون استخدام return doSomething() في onclick ومجرد استخدام doSomething() .

السبب الثاني لتفادي # هو أن return false; النهائي return false; لن يتم تنفيذ الأمر إذا ألقت الدالة المسماة خطأ. ومن ثم يجب على المطورين أن يتذكروا التعامل مع أي خطأ بشكل مناسب في الوظيفة المطلوبة.

السبب الثالث هو أن هناك حالات يتم فيها تعيين خاصية الحدث onclick بشكل ديناميكي. أفضّل أن أكون قادرًا على استدعاء وظيفة أو تعيينها ديناميكيًا دون الحاجة إلى ترميز الوظيفة خصيصًا لطريقة واحدة من المرفقات أو غيرها. ومن ثم فإن onclick (أو على أي شيء) في HTML tagup تبدو كالتالي:

onclick="someFunc.call(this)"

أو

onclick="someFunc.apply(this, arguments)"

باستخدام javascript:void(0) يتجنب كل الصداع أعلاه ، ولم أجد أي أمثلة على الجانب السلبي.

إذا كنت مطورًا وحيدًا ، فيمكنك تحديد اختيارك بشكل واضح ، ولكن إذا كنت تعمل كفريق ، فعليك أن تذكر:

استخدم href="#" ، تأكد من أن onclick يحتوي دائمًا على return false; في النهاية ، فإن أي دالة تسمى لا تقوم بطرح خطأ وإذا قمت بإرفاق وظيفة بشكل ديناميكي بخاصية onclick تأكد من أنه بالإضافة إلى عدم إلقاء خطأ فإنه يقوم بإرجاع false .

أو

استخدم href="javascript:void(0)"

من الواضح أن الثانية أسهل بكثير من التواصل.


أنا استخدم التالي

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

في حين أن

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

أوافق على اقتراحات في مكان آخر تفيد بأنه يجب عليك استخدام عنوان URL عادي في سمة href ، ثم استدعاء بعض وظيفة JavaScript في onclick. العيب هو ، أنها تلقائيا إضافة return false بعد المكالمة.

تكمن المشكلة في هذا النهج في أنه إذا لم تعمل هذه الوظيفة أو إذا كانت هناك أية مشكلة ، فسيصبح الرابط غير قابل للنقر. سيعرض حدث Onclick دائمًا false ، لذلك لن يتم استدعاء عنوان URL العادي.

هناك حل بسيط للغاية. دع الدالة ترجع true إذا كانت تعمل بشكل صحيح. ثم استخدم القيمة التي تم إرجاعها لتحديد ما إذا كان يجب إلغاء النقرة أم لا:

جافا سكريبت

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

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


أود أن أقترح بصراحة لا. وأود أن استخدام <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 على علامة العنصر. و gotcha الوحيد هو تأثير نص psuedo 3D في IEs القديمة التي لا يمكن تعطيلها.

إذا كان يجب عليك استخدام عنصر A ، فاستخدم javascript:void(0); لأسباب سبق ذكرها.

  • سيتم اعتراضه دائمًا في حالة فشل حدث onclick.
  • لن يتم إجراء مكالمات تحميل خاطئة أو تشغيل أحداث أخرى بناءً على تغيير علامة التجزئة
  • يمكن أن تتسبب علامة التجزئة في حدوث سلوك غير متوقع في حالة سقوط النقرة (رمية onclick) ، وتجنبها ما لم يكن سلوكًا مناسبًا ، وتريد تغيير سجل التنقل.

ملاحظة: يمكنك استبدال 0 بسلسلة مثل javascript:void('Delete record 123') والتي يمكن أن تكون بمثابة مؤشر إضافي سيظهر ما ستقوم به النقرة بالفعل.


أول واحد ، من الناحية المثالية مع وجود رابط حقيقي لمتابعة في حالة تعطيل جافا سكريبت المستخدم. ما عليك سوى التأكد من إرجاع false لمنع حدوث حدث النقر من التشغيل إذا تم تنفيذ جافا سكريبت.

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

إذا كنت تستخدم Angular2 ، فستعمل هذه الطريقة:

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

انظر هنا https://.com/a/45465728/2803344


إجراء <a href="#" onclick="myJsFunc();">Link</a> أو <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> أو أي شيء آخر يحتوي على سمة onclick - كان بخير مرة أخرى قبل خمس سنوات ، على الرغم من أنه الآن يمكن أن يكون ممارسة سيئة. اليك السبب:

  1. وهو يعزز ممارسة جافا سكريبت الاقتحامية - التي تبين أنها صعبة الصيانة وصعبة الحجم. المزيد عن هذا في جافا سكريبت غير مزعجة .

  2. أنت تقضي وقتك في كتابة رمز مطوّل للغاية بشكل لا يصدق - والذي يحتوي على فائدة ضئيلة جدًا (إن وجدت) من مصدر التعليمات البرمجية الخاص بك.

  3. هناك الآن طرق أفضل وأسهل وأكثر قابلية للصيانة وقابلة للتحقيق لتحقيق النتيجة المرجوة.

طريقة جافا سكريبت غير مزعجة

فقط لا تملك خاصية href على الإطلاق! وستتولى أي عملية إعادة تعيين جيدة لـ CSS معالجة نمط المؤشر الافتراضي المفقود ، بحيث لا يمثل ذلك مشكلة. ثم قم بإرفاق وظيفة JavaScript باستخدام أفضل الممارسات غير المرغوب فيها - والتي تكون أكثر قابلية للصيانة مع بقاء منطق جافا سكريبت في JavaScript ، بدلاً من الترميز - وهو أمر ضروري عند بدء تطوير تطبيقات JavaScript كبيرة الحجم والتي تتطلب تقسيم المنطق إلى مكونات وقوالب blackboxed. المزيد عن ذلك في بنية تطبيقات جافا سكريبت على نطاق واسع

مثال بسيط رمز

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

A Blackboxed Backbone.js سبيل المثال

للحصول على مثال مكون قابل للتطوير ، blackboxed ، Backbone.js - شاهد مثال jsfiddle الحالي هنا . لاحظ كيف نستخدم ممارسات جافا سكريبت غير المزعجة ، وفي كمية ضئيلة من الكود يكون لديك مكون يمكن تكراره عبر الصفحة عدة مرات بدون آثار جانبية أو تعارضات بين المثيلات المكونة المختلفة. رائعة حقا!

ملاحظات

  • سيؤدي حذف السمة href على العنصر إلى عدم إمكانية الوصول إلى العنصر باستخدام التنقل في مفتاح tab . إذا كنت ترغب في الوصول إلى هذه العناصر عبر مفتاح tab ، يمكنك تعيين سمة tabindex ، أو استخدام عناصر button بدلاً من ذلك. يمكنك بسهولة تصميم عناصر الزر لتبدو كالوصلات العادية كما هو مذكور في إجابة Tracker1 .

  • سيؤدي حذف السمة href على العنصر إلى تعطيل Internet Explorer 6 و Internet Explorer 7 على a:hover styling ، ولهذا السبب قمنا بإضافة a.hover JavaScript بسيطة لتحقيق ذلك عبر a.hover بدلاً من ذلك. وهو أمر جيد تمامًا ، كما لو لم يكن لديك سمة href ولا أي تدهور رشيق ، فلن يعمل رابطك على أي حال - وستكون لديك مشكلات أكبر تقلق بشأنها.

  • إذا كنت تريد أن يظل الإجراء الخاص بك يعمل مع JavaScript معطلاً ، فإن استخدام عنصر له سمة href يذهب إلى بعض عناوين URL التي ستقوم بتنفيذ الإجراء يدويًا بدلاً من طلب Ajax أو ما يجب أن يكون عليه الطريق. إذا كنت تقوم بذلك ، فإنك تريد التأكد من إجراء event.preventDefault() في مكالمة النقر لتتأكد من أنه عند النقر فوق الزر لا يتبع الارتباط. هذا الخيار يسمى التدهور الرشيق.


باستخدام # فقط يجعل بعض الحركات المضحكة ، لذلك أوصي باستخدام #self إذا كنت ترغب في توفير جهود الكتابة من JavaScript bla, bla, .


سأستخدم:

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

الأسباب:

  1. هذا يجعل من href بسيطة ، محركات البحث في حاجة إليها. إذا كنت تستخدم أي شيء آخر (مثل سلسلة) ، فقد يتسبب في خطأ 404 not found .
  2. عندما يمر الماوس فوق الرابط ، فإنه لا يُظهر أنه نص برمجي.
  3. باستخدام return false; ، لا تقفز الصفحة إلى الأعلى أو تكسر زر back .

لا هذا ولا ذاك.

إذا كان بإمكانك الحصول على عنوان URL فعلي يستفيد من ذلك مثل HREF. لن يتم إطلاق onclick إذا قام شخص ما بالنقر نقرًا مزدوجًا على الارتباط الخاص بك لفتح علامة تبويب جديدة أو إذا كانت JavaScript معطلة.

إذا لم يكن ذلك ممكنًا ، فيجب عليك على الأقل إدخال علامة الربط في المستند باستخدام JavaScript ومعالجات أحداث النقر المناسبة.

أنا أدرك أن هذا ليس ممكنًا دائمًا ، ولكن في رأيي يجب السعي إليه في تطوير أي موقع ويب عام.

تحقق من جافا سكريبت غير مزعجة والتعزيز التدريجي (كل من ويكيبيديا).


ما لم تكن تكتب الارتباط باستخدام جافا سكريبت (حتى تعرف أنه ممكّن في المتصفح) ، يجب أن تقدم بشكل مثالي رابطًا مناسبًا للأشخاص الذين يتصفحون جافا سكريبت معطلاً ، ثم يمنعون الإجراء الافتراضي للرابط في onclick الخاص بك معالج الأحداث. وبهذه الطريقة ، سيتم تشغيل تلك الوظائف التي تم تمكين جافا سكريبت بها ، وسيتمكن الأشخاص الذين لديهم جافا سكريبت معطلة من الانتقال إلى صفحة مناسبة (أو موقع داخل نفس الصفحة) بدلاً من النقر فوق الارتباط وعدم حدوث أي شيء.


# أفضل من javascript:anything ، ولكن ما يلي هو أفضل:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

جافا سكريبت:

$(function() {
    $(".some-selector").click(myJsFunc);
});

يجب عليك دائمًا السعي لتحقيق التدهور اللائق (في حالة عدم تمكين جافا سكريبت للمستخدم ... وعندما يكون ذلك مع المواصفات والميزانية). كما يعتبر أيضًا نموذجًا سيئًا لاستخدام سمات وبروتوكولات JavaScript مباشرةً في HTML.


'#' سوف يعيد المستخدم إلى أعلى الصفحة ، لذلك عادة ما أذهب مع void(0) .

javascript:; يتصرف أيضا مثل javascript:void(0);


أود أن أقول إن أفضل طريقة هي جعل مرساة href إلى معرف لا تستخدمه أبدًا ، مثل # Do1Not2Use3This4Id5 أو معرف مشابه ، بأنك متأكد 100٪ أنه لن يستخدم أي شخص ولن يسيء إليه.

  1. Javascript:void(0)فكرة سيئة وتنتهك سياسة أمان المحتوى على صفحات HTTPS التي تدعم CSP https://developer.mozilla.org/en/docs/Security/CSP (بفضل jakub.g)
  2. باستخدام فقط #سوف يقفز المستخدم إلى الأعلى عند الضغط عليه
  3. لن تفسد الصفحة إذا لم يتم تمكين JavaScript (إلا إذا كان لديك شفرة اكتشاف JavaScript
  4. إذا تم تمكين JavaScript ، فيمكنك تعطيل الحدث الافتراضي
  5. يجب عليك استخدام href إلا إذا كنت تعرف كيفية منع متصفحك من تحديد بعض النص ، (لا تعرف ما إذا كان استخدام 4 سيزيل الشيء الذي يمنع المتصفح من تحديد النص)

في الأساس لم يذكر أي شخص 5 في هذه المقالة التي أعتقد أنها مهمة لأن موقعك يأتي كمحترف غير مهني إذا بدأ فجأة في اختيار الأشياء حول الرابط.


اعتمادا على ما تريد تحقيقه ، يمكن أن تنسى onclick ومجرد استخدام href:

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

يحصل حول ضرورة العودة كاذبة. لا أحب هذا #الخيار لأنه ، كما ذكر ، سوف يأخذ المستخدم إلى أعلى الصفحة. إذا كان لديك مكان آخر لإرسال المستخدم إذا لم يكن لديك جافا سكريبت ممكن (وهو أمر نادر حيث أعمل ، ولكن فكرة جيدة جدا) ، فإن طريقة ستيف المقترحة تعمل بشكل رائع.

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

وأخيرًا ، يمكنك استخدامه javascript:void(0)إذا كنت لا تريد أن يذهب أي شخص إلى أي مكان وإذا كنت لا ترغب في استدعاء وظيفة JavaScript. إنه يعمل بشكل رائع إذا كان لديك صورة تريد أن يحدث بها حدث تمرير ، ولكن لا يوجد أي شيء يمكن للمستخدم النقر عليه.


عندما يكون لدي العديد من الروابط ، أفضل أن أمنحهم فئة "لا رابط".

ثم في jQuery ، أقوم بإضافة التعليمة البرمجية التالية:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

ول HTML ، الرابط ببساطة

<a href="/" class="no-link">Faux-Link</a>

لا أحب استخدام بطاقات Hash-Tags إلا إذا تم استخدامها في المراسي ، ولا أفعل ما ذكر أعلاه إلا عندما يكون لدي أكثر من رابطين زائفين ، وإلا سأذهب مع javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

عادةً ، أحب أن أتجنب استخدام رابط على الإطلاق وأن أقوم فقط بلف شيء ما في نطاق واستخدامه كطريقة لتنشيط بعض شفرة جافا سكريبت JavaScript ، مثل نافذة منبثقة أو كشف محتوى.


أعتقد أنك تقدم ثنائية زائفة. هذه ليست الخيارين فقط.

أتفق مع السيد D4V360 الذي اقترح أنه على الرغم من أنك تستخدم علامة الربط ، فأنت لا تملك بالفعل مرساة هنا. كل ما لديك هو قسم خاص في وثيقة يجب أن تتصرف بشكل مختلف قليلاً. A <span>البطاقة هي أكثر ملاءمة بكثير.


إذا كنت تستخدم AngularJS ، فيمكنك استخدام ما يلي:

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

والتي لن تفعل أي شيء.

بالاضافة

  • لن ينقلك إلى أعلى الصفحة ، كما هو الحال مع (#)
    • لذلك ، لا تحتاج إلى العودة صراحةً falseباستخدام JavaScript
  • انها قصيرة موجزة

إذا لم يكن hrefهناك ربما لا يوجد سبب لاستخدام علامة مرساة.

يمكنك إرفاق الأحداث (النقر ، التمرير ، إلخ) في كل عنصر تقريبًا ، فلماذا لا تستخدم فقط spanأو لا div؟

وبالنسبة للمستخدمين الذين لديهم JavaScript معطل: إذا لم يكن هناك احتياطي (على سبيل المثال ، بديل href) ، فيجب ألا يتمكنوا على الأقل من رؤية هذا العنصر والتفاعل معه على الإطلاق ، بغض النظر عن العلامة <a>أو <span>العلامة.


حاولت كل من google chrome باستخدام أدوات مطوري البرامج ، id="#"واستغرق ذلك 0.32 ثانية. في حين أن javascript:void(0)الطريقة أخذت فقط 0.18 ثانية. في google chrome ، javascript:void(0)يعمل بشكل أفضل وأسرع.


عادة ، يجب أن يكون لديك دائمًا رابط الرجوع إلى الخلف للتأكد من أن عملاء جافا سكريبت معطل لديهم بعض الوظائف. هذا المفهوم يسمى جافا سكريبت غير مزعجة.

مثال ... لنفترض أن لديك رابط البحث التالي:

<a href="search.php" id="searchLink">Search</a>

يمكنك دائمًا القيام بما يلي:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

وبهذه الطريقة ، يتم توجيه الأشخاص الذين لديهم JavaScript معطل إلى search.phpحين مشاهدة المشاهدين لجافا سكريبت الخاص بك وظيفة محسنة.





href