it-swarm.asia

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

فيما يلي طريقتان لإنشاء ارتباط له الغرض الوحيد من تشغيل شفرة 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>
3863
2cBGj7vsfp

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

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

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

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

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

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

onclick="someFunc.call(this)"

OR

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

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

لذلك إذا كنت مطورًا وحيدًا ، فيمكنك تحديد ما تريده بوضوح ، ولكن إذا كنت تعمل كفريق واحد ، فيجب عليك إما تحديد الحالة التالية:

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

OR

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

والثاني هو أسهل بكثير التواصل.

2091
AnthonyWJones

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

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

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

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

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

1251
Aaron Wagner

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

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

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

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

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

ليس لديك سمة href على الإطلاق! أي إعادة تعيين CSS جيدة من شأنها أن تعتني بنمط المؤشر الافتراضي المفقود ، وبالتالي فهي ليست قضية. ثم قم بإرفاق وظيفة JavaScript باستخدام أفضل الممارسات الرشيقة وغير المزعجة - والتي يمكن الحفاظ عليها بشكل أكبر حيث يظل منطق 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>

BlackboxedBackbone.jsمثال

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

ملاحظات

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

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

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

758
balupton

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

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

302
Adam Tuttle

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


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

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

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

244
Tracker1

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

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

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

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

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

136
Zach

لا إذا سألتني.

إذا كان "رابط" غرضك الوحيد هو تشغيل بعض رموز JavaScript ، فلن يكون مؤهلاً لرابط ؛ بالأحرى جزء من النص مع وظيفة JavaScript مقترنة به. أوصي باستخدام علامة <span> مع رمز onclick handler مرفقة به وبعض CSS الأساسي لتقليد الارتباط. يتم إنشاء ارتباطات للتنقل ، وإذا لم يكن رمز JavaScript الخاص بك مخصصًا للملاحة ، فيجب ألا تكون علامة <a>.

مثال:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>
95
fijter

من الأفضل أن تفعل هذا:

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

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

95
Steve Paulo

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

75
Spammer Joe

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

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

في حين أن

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

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

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

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

JavaScript

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.

53
Fczbkk

# أفضل من 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 وسمات JavaScript أمرًا سيئًا.

50
Justin Johnson

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

38
Simon Forrest

أوصي باستخدام عنصر <button> بدلاً من ذلك ، خاصةً إذا كان من المفترض أن ينتج عن عنصر التحكم تغيير في البيانات. (شيء مثل وظيفة.)

من الأفضل أن تقوم بحقن العناصر بطريقة مزعجة ، وهو نوع من التحسين التدريجي. (انظر هذا التعليق .)

37
phyzome

من المؤكد أن التجزئة (#) أفضل لأنه في جافا سكريبت يكون عبارة عن مخطط زائف:

  1. يلوث التاريخ
  2. إنشاء نسخة جديدة من المحرك
  3. يعمل في نطاق عالمي ولا يحترم نظام الأحداث.

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

بالإضافة إلى ذلك ، فيما يتعلق باقتراح cowgod ، لا سيما هذا: ...href="javascript_required.html" onclick="... هذا أسلوب جيد ، لكنه لا يميز بين سيناريوهات "JavaScript JavaScript" و "onclick failure".

35
Free Consulting

أنا عادة أذهب ل

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

إنه أقصر من جافا سكريبت: باطل (0) ويفعل نفس الشيء.

30
dnetix

سأستخدم:

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

الأسباب:

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

اخترت استخدام javascript:void(0) ، لأن هذا الاستخدام قد يمنع النقر بزر الماوس الأيمن لفتح قائمة المحتوى. لكن javascript:; أقصر ويفعل الشيء نفسه.

25
user564706

لذا ، عند القيام ببعض أشياء JavaScript باستخدام علامة <a /> وإذا وضعت href="#" أيضًا ، يمكنك إضافة إرجاع false في نهاية الحدث (في حالة ربط الحدث المضمن) مثل:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

أو يمكنك تغيير href السمة باستخدام JavaScript مثل:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

أو

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

ولكن من الناحية الدلالية ، كل الطرق المذكورة أعلاه لتحقيق ذلك خاطئة (إنها تعمل بشكل جيد) . إذا لم يتم إنشاء أي عنصر للتنقل في الصفحة وله بعض عناصر JavaScript المرتبطة بها ، فيجب ألا يكون علامة <a>.

يمكنك ببساطة استخدام <button /> بدلاً من ذلك للقيام بأشياء أو أي عنصر آخر مثل b أو span أو أي شيء يناسبك حسب حاجتك ، لأنه يُسمح لك بإضافة أحداث على جميع العناصر.


لذلك ، هناك فائدة واحدة لاستخدام <a href="#">. يمكنك الحصول على مؤشر المؤشر افتراضيًا على هذا العنصر عندما تفعل a href="#". لذلك ، أعتقد أنه يمكنك استخدام CSS لهذا مثل cursor:pointer; الذي يحل هذه المشكلة أيضًا.

وفي النهاية ، إذا كنت تربط الحدث برمز JavaScript نفسه ، فيمكنك القيام بـ event.preventDefault() لتحقيق ذلك إذا كنت تستخدم علامة <a> ، ولكن إذا كنت لا تستخدم علامة <a> لهذا ، فستحصل على ميزة ، لا تحتاج إلى القيام بذلك.

لذلك ، إذا رأيت ، من الأفضل عدم استخدام علامة لهذا النوع من الأشياء.

23
Ashish Kumar

سيكون من الأفضل استخدام jQuery ،

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

وحذف كلاً من href="#" و href="javascript:void(0)".

علامة العلامات مرساة سيكون مثل

<a onclick="hello()">Hello</a>

بسيطا بما فيه الكفاية!

22
naveen

لا تستخدم الروابط لغرض وحيد هو تشغيل JavaScript.

استخدام href = "#" يمرر الصفحة إلى الأعلى ؛ استخدام الفراغ (0) يخلق مشاكل ملاحية داخل المتصفح.

بدلاً من ذلك ، استخدم عنصرًا غير الرابط:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

وقم بتصميمه باستخدام CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}
22
Garrett

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

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

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

بالاضافة

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

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

مثال ... دعنا نقول أن لديك رابط البحث التالي:

<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 بينما يقوم المشاهدون الذين يستخدمون JavaScript بعرض وظائفك المحسنة.

19
Andrew Moore

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

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

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

18
achairapart

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

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

16
Clever Human

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

16
user6460587

اعتمادًا على ما تريد إنجازه ، يمكنك نسيان النقر واستخدام href فقط:

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

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

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

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

16
Will Read

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

ثم في jQuery ، أضف الكود التالي:

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

وبالنسبة إلى HTML ، يكون الرابط ببساطة

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

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

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

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

16
Stacks on Stacks on Stacks

أنا شخصيا استخدامها في الجمع. فمثلا:

HTML

<a href="#">Link</a>

مع القليل من مسج

$('a[href="#"]').attr('href','javascript:void(0);');

أو

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

لكنني أستخدم ذلك فقط لمنع انتقال الصفحة إلى القمة عندما ينقر المستخدم على مرساة فارغة. نادراً ما أستخدم onClick وغيره من الأحداث on مباشرة في HTML.

سيكون اقتراحي هو استخدام عنصر <span> مع السمة class بدلاً من المرساة. فمثلا:

<span class="link">Link</span>

ثم قم بتعيين الوظيفة إلى .link مع نص ملفوف في النص وقبل العلامة </body> أو في مستند JavaScript خارجي مباشرة.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* ملاحظة: بالنسبة للعناصر التي تم إنشاؤها ديناميكيًا ، استخدم:

$('.link').on('click', function() {
    // do something
});

وللعناصر التي تم إنشاؤها ديناميكيًا والتي يتم إنشاؤها باستخدام عناصر تم إنشاؤها ديناميكيًا ، استخدم:

$(document).on('click','.link', function() {
    // do something
});

ثم يمكنك تصميم عنصر الامتداد لتبدو وكأنه مرساة مع القليل من CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

إليكa jsFiddleمثال ما ذكر أعلاه.

13
mdesdev

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

يعد استخدام SEO مسارات URL المألوفة في التطبيق الخاص بك ، مثل/Home/Action/Parameters ، ممارسة جيدة أيضًا. إذا كان لديك رابط إلى صفحة تعمل بدون جافا سكريبت أولاً ، يمكنك تحسين التجربة بعد ذلك. استخدم رابطًا حقيقيًا إلى صفحة العمل ، ثم أضف حدثًا onlick لتحسين العرض التقديمي.

هنا عينة. الصفحة الرئيسية/ChangePicture هو رابط عمل لنموذج على صفحة كاملة مع واجهة المستخدم وأزرار إرسال HTML القياسية ، ولكن يبدو أجمل حقن في مربع حوار مشروط مع أزرار jQueryUI. تعمل كلتا الطريقتين ، وفقًا للمتصفح ، الذي يرضي التطوير الأول للهاتف المحمول.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>
13
Josh Simerman

يمكنك أيضا كتابة تلميح في مرساة مثل هذا:

<a href="javascript:void('open popup image')" onclick="return f()">...</a>

لذلك سيعرف المستخدم ما يفعله هذا الرابط.

11
Lukom

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

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

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

11
Anders M.

من الجيد أن يكون الوصول إلى موقعك متاحًا من قِبل المستخدمين الذين قاموا بتعطيل JavaScript ، وفي هذه الحالة يشير href إلى صفحة تؤدي نفس الإجراء الذي يتم فيه تنفيذ JavaScript. وإلا أستخدم " # " مع "return false;" لمنع الإجراء الافتراضي (انتقل إلى أعلى الصفحة) كما ذكر الآخرون.

يوفر تطبيق Googling لـ "javascript:void(0)" الكثير من المعلومات حول هذا الموضوع. بعض منهم ، مثل هذا واحد ذكر الأسباب إلى عدم استخدام الفراغ (0) .

10
mmacaulay

أرى الكثير من الإجابات من قِبل أشخاص يريدون الاستمرار في استخدام قيم #href ، وبالتالي ، إليك إجابة آمل أن ترضي كلا المعسكرين:

A) يسعدني أن يكون javascript:void(0) كقيمة href:

<a href="javascript:void(0)" onclick="someFunc.call(this)">Link Text</a>

B) أنا أستخدم jQuery وأريد # كقيمة href:

<a href="#" onclick="someFunc.call(this)">Link Text</a>

<script type="text/javascript">
    /* Stop page jumping when javascript links are clicked.
       Only select links where the href value is a #. */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

ملاحظة ، إذا كنت تعرف أن الارتباطات لن يتم إنشاؤها ديناميكيًا ، فاستخدم الدالة click بدلاً من ذلك:

$('a[href="#"]').click(function(e) {

9
dazbradbury

هناك شيء واحد أكثر أهمية أن نتذكر هنا. القسم 508 الامتثال. بسبب ذلك ، أشعر أنه من الضروري الإشارة إلى أنك بحاجة إلى علامة الربط لقارئات الشاشة مثل JAWS / لتتمكن من تركيزها من خلال الجدولة. لذا فإن الحل "استخدم جافا سكريبت وننسى المرساة لتبدأ" ليس خيارًا لبعض هذا. يعد إطلاق جافا سكريبت داخل href ضروريًا فقط إذا لم تستطع تحمل تكاليف الشاشة للقفز مرة أخرى إلى الأعلى. يمكنك استخدام settimeout لمدة 0 ثانية واطلاق النار على جافا سكريبت JavaScript إلى المكان الذي تحتاج إلى التركيز فيه ، ولكن حتى واجهة التطبيق ستقفز إلى الأعلى ثم تعود.

9
rcof

أستخدم href = "#" للروابط التي أريد سلوكًا دمية لها. ثم استخدم هذا الكود:

$(document).ready(function() {
    $("a[href='#']").click(function(event) {
        event.preventDefault();
    });
});

بمعنى إذا كان href يساوي تجزئة (* = "#") فإنه يمنع سلوك الارتباط الافتراضي ، وبالتالي لا يزال يسمح لك بكتابة وظائف له ، ولا يؤثر على نقرات الربط.

9
Vinny Fonseca

ما أفهمه من كلماتك هو أنك تريد إنشاء رابط لتشغيل شفرة JavaScript فقط.

ثم عليك أن تضع في اعتبارك أن هناك أشخاصًا يقومون بحظر JavaScript في متصفحاتهم.

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

لهذا السبب ، لن يكون أي منهما جيدًا عند تعطيل JavaScript.

Aand إذا تم تمكين JavaScript وتريد فقط استخدام هذا الرابط لاستدعاء وظيفة JavaScript بعد ذلك

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

هو وسيلة أفضل بكثير من استخدام

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

لأن href = "#" سيتسبب في قيام الصفحة بإجراءات غير مطلوبة.

أيضًا ، هناك سبب آخر يجعل <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> أفضل من <a href="#" onclick="myJsFunc();">Link</a> وهو أن JavaScript يستخدم كلغة برمجة نصية لمعظم المتصفحات. كمثال Internet Explorer ، يستخدم سمة onclick لتحديد نوع لغة البرمجة النصية التي سيتم استخدامها. ما لم تنبثق لغة برمجة نصية جيدة أخرى ، سيتم استخدام JavaScript بواسطة Internet Explorer كلغة افتراضية أيضًا ، ولكن إذا استخدمت لغة برمجة نصية أخرى javascript: ، فستسمح لبرنامج Internet Explorer بفهم لغة البرمجة النصية المستخدمة.

النظر في هذا ، أنا أفضل استخدام وممارسة

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

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

$(document).ready(function(){
    $(".blabla").append('<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>')
});
8
Berker Yüceer

يمكنك استخدام href وإزالة جميع الروابط التي تحتوي على علامات تجزئة فقط:

HTML:

<a href="#" onclick="run_foo()"> foo </a>

JS:

$(document).ready(function(){         // on DOM ready or some other event

   $('a[href=#]').attr('href','');    // set all reference handles to blank strings
                                      //  for anchors that have only hashes

});
8
vol7ron

لماذا لا تستخدم هذا؟ هذا لا ينتقل الصفحة لأعلى.

<span role="button" onclick="myJsFunc();">Run JavaScript Code</span>
8
AlxGol

من الناحية المثالية ، يجب أن يكون لديك عنوان URL حقيقي كاحتياطي لمستخدمي JavaScript.

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

7
Peter

في اتفاق تام مع الشعور العام ، استخدم void(0) عندما تكون في حاجة إليها ، واستخدم عنوان URL صالحًا عند الحاجة.

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

<a href="./Readable/Text/URL/Pointing/To/Server-Side/Script" id="theLinkId">WhyClickHere</a>

من جانب الخادم ، عليك فقط تحليل عنوان URL وسلسلة الاستعلام والقيام بما تريده. إذا كنت ذكيًا ، يمكنك السماح للبرنامج النصي من جانب الخادم بالرد على طلبات Ajax والطلبات القياسية بشكل مختلف. مما يتيح لك الحصول على شفرة مركزية موجزة تعالج جميع الروابط في صفحتك.

دروس إعادة كتابة URL

الايجابيات

  • يظهر في شريط الحالة
  • تمت ترقيته بسهولة إلى Ajax عبر معالج onclick في JavaScript
  • تعليقات عمليا نفسها
  • يمنع الدلائل الخاصة بك من أن تتناثر مع ملفات HTML ذات الاستخدام الواحد

سلبيات

  • يجب الاستمرار في استخدام event.preventDefault () في JavaScript
  • معالجة المسار معقدة إلى حد ما وتحليل URL على جانب الخادم.

أنا متأكد من أن هناك الكثير من سلبيات هناك. لا تتردد في مناقشتها.

7
user394888

على موقع ويب حديث ، يجب تجنب استخدام href إذا كان العنصر يقوم بوظيفة JavaScript فقط (وليس رابط حقيقي).

لماذا ا؟ يخبر وجود هذا العنصر المتصفح أن هذا رابط مع وجهة. باستخدام ذلك ، سيعرض المتصفح وظيفة "فتح في علامة تبويب/نافذة جديدة" (يتم تشغيلها أيضًا عند استخدام shift + click). سيؤدي القيام بذلك إلى فتح نفس الصفحة دون تشغيل الوظيفة المطلوبة (مما يؤدي إلى إحباط المستخدم).

فيما يتعلق بـ IE: اعتبارًا من IE8 ، يعمل نمط العنصر (بما في ذلك التحويم) إذا تم تعيين النمط. الإصدارات الأخرى من IE لم تعد تقلق بعد الآن.

العيب الوحيد: إزالة HREF يزيل tabindex. للتغلب على هذا ، يمكنك استخدام زر تم تصميمه كرابط أو إضافة سمة tabindex باستخدام JS.

7
TomDK

إذا كنت تستخدم عنصر <a> ، فما عليك سوى استخدام هذا:

<a href="javascript:myJSFunc();" />myLink</a>

أنا شخصياً أرفق معالج حدث مع JavaScript لاحقًا بدلاً من ذلك (باستخدام attachEvent أو addEventListener أو ربما <ضع إطار JavaScript المفضل هنا> أيضًا).

7
Pablo Cabrera

لا تغيب عن البال حقيقة أن عنوان URL الخاص بك قد يكون ضروريًا - يتم تشغيل onclick قبل اتباع المرجع ، لذلك ستحتاج في بعض الأحيان إلى معالجة شيء من جانب العميل قبل الانتقال من الصفحة.

7
nathaniel

فقط لالتقاط النقطة التي ذكرها البعض.

من الأفضل ربط الحدث 'onload'a أو $ (' document '). ready {}؛ ثم لوضع JavaScript مباشرة في حدث النقر.

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

بما أن لديّ يد العون ، إليك بعض مسج مما قد يساعدك:

var [functionName] = function() {
   // do something
};

jQuery("[link id or other selector]").bind("click", [functionName]);
6
Matt Goddard

إذا كنت تستخدم رابطًا كوسيلة ل فقط تنفيذ بعض تعليمات JavaScript البرمجية (بدلاً من استخدام مسافة مثل D4V360 المقترحة بشكل كبير) ، فقط قم بما يلي:

<a href="javascript:(function()%7Balert(%22test%22)%3B%7D)()%3B">test</a>

إذا كنت تستخدم رابطًا مع onclick للتنقل ، فلا تستخدم href = "#" كقاعدة احتياطية عند إيقاف تشغيل JavaScript. عادة ما يكون ذلك مزعجًا للغاية عندما ينقر المستخدم على الرابط. بدلاً من ذلك ، قدم نفس الرابط الذي سيوفره معالج onclick إن أمكن. إذا لم تتمكن من القيام بذلك ، تخطي onclick واستخدم فقط JavaScript URI في href.

6
Shadow2531

أفضّل بشدة إبقاء JavaScript خارج ترميز HTML الخاص بي قدر الإمكان. إذا كنت أستخدم <a> كأنقر على معالجات الأحداث ، فنوصيك باستخدام <a class="trigger" href="#">Click me!</a>.

$('.trigger').click(function (e) {
    e.preventDefault();
    // Do stuff...
});

من المهم جدًا ملاحظة أن العديد من المطورين هناك يعتقدون أن استخدام علامات الربط لمعالجات أحداث النقر أمر غير جيد. يفضلون استخدام <span> أو <div> مع بعض CSS التي تضيف cursor: pointer; إليها. هذه مسألة إذا كان الكثير من النقاش.

6
Jesse Atkinson

يجب عليك عدم استخدام inline onclick="something();" في HTML الخاص بك لعدم تلويثها برمز لا معنى له ؛ يجب تعيين جميع روابط النقر في ملفات Javascript (* .js).

تعيين الربط مثل هذا: $('#myAnchor').click(function(){... **return false**;}); أو $('#myAnchor').bind('click', function(){... **return false**;});

ثم لديك ملف HTML نظيف سهل التحميل (وسهل الاستخدام) بدون آلاف href="javascript:void(0);" و href="#" فقط

6
G. Ghez

إليك أحد الخيارات الأخرى لتحقيق الاكتمال ، وهو يمنع الارتباط من القيام بأي شيء حتى إذا تم تعطيل JavaScript ، وقصر :)

<a href="#void" onclick="myJsFunc()">Run JavaScript function</a>

إذا لم يكن المعرف موجودًا على الصفحة ، فلن يؤدي الارتباط إلى شيء.

بشكل عام ، أوافق على إجابة Aaron Wagner ، حيث يجب حقن رابط JavaScript مع رمز JavaScript في المستند.

3
Timo Huovinen

Javascript: void(0); باطلة لإلغاء القيمة [لم يتم تعيينه] ، وهذا يعني أن المتصفح الخاص بك سوف يذهب إلى NULL انقر فوقDOM، ونافذة العودة إلى false.
'#' لا يتبع DOM أو Window في javascript. وهذا يعني أن علامة "#" داخل المرساة href هيرابط. رابط إلى نفس الاتجاه الحالي.

2
SchoolforDesign

تم التحرير في 2019 يناير

في HTML5 ، باستخدام عنصر بدون سمة href هو صالح . يعتبر "رابط تشعبي للعنصر النائب"

إذا لم يكن للعنصر سمة href ، فإن العنصر يمثل عنصرًا نائبًا للمكان الذي ربما تم وضع رابط فيه ، إذا كان ذا صلة ، ويتألف من محتويات العنصر فقط.

مثال:

<a>previous</a>

إذا كنت بعد ذلك تريد أن تفعل خلاف ذلك:

1 - إذا لم ينتقل الرابط إلى أي مكان ، فلا تستخدم عنصر <a>. استخدم <span> أو أي شيء آخر مناسبًا وأضف CSS :hover لتصميمه كما تريد.

2 - استخدم javascript:void(0) OR javascript:undefined OR javascript:; إذا كنت تريد أن تكون خامًا ودقيقًا وسريعًا.

2
Lyes CHIOUKH

يمكنك استخدام javascript: void (0) هنا بدلاً من استخدام # لإيقاف إعادة توجيه علامة الارتساء إلى قسم الرأس.

function helloFunction() {
    alert("hello world");
}
<a href="javascript:void(0)" onclick="helloFunction();">Call Hello Function</a>
0
Javed Khan