(ملاحظة المترجم: تحل هذه المقالة مشكلة استخدام JS لفتح صفحة جديدة عند الضغط على مفتاح CTRL)
في مواصفات HTML5 المبسطة ، يُسمح بتضمين DIVs متعددة و/أو عناصر أخرى على مستوى الكتلة في العلامة. الآن ، فقط لف عناصر الكتلة مع علامة <a> ، يمكنك حل المشكلة التي تحتاجها في الأصل للاستماع مع JavaScript و Window.location لتحقيق وظيفة إعادة توجيه الصفحة.
ومع ذلك ، فإن نموذج التغليف هذا باستخدام علامة <a> لا يعمل أيضًا بشكل جيد - على سبيل المثال ، هناك بعض العلامات في عنصر كتلة. في هذه الحالة ، نريد فقط القفز إلى عنوان معين عند النقر على أجزاء أخرى غير <a> في الوالد.
بالطبع ، يمكن أن يحقق استخدام مستمع بسيط مثل ما يلي احتياجاتنا:
نسخة الكود كما يلي:
sithelement.addeventListener ('click' ، function (e) {
// أي عنوان عنوان URL على ما يرام ، أو يمكنك استخدام رمز آخر لتحديده.
// هنا هي سمة "Data-Src` DOM لهذا العنصر (السمة)
window.location = sithElement.get ('data-url') ؛
}) ؛
... ولكن هذا في بعض الأحيان لديه تجربة مستخدم سيئة. عندما تضغط على مفتاح CTRL (MAC هو مفتاح الأوامر) وانقر مع الماوس ، سيفتح الرابط في نافذة (TAB) نفسه. مع العلم أن هناك هذه المشكلة ، يجب أن تفكر في كيفية حلها. يمكننا تحقيق ذلك عن طريق تعديل رمز صغير. خذ بعض الوقت لإصلاح المستمع الخاص بك:
نسخة الكود كما يلي:
sithelement.addeventListener ('click' ، function (e) {
// احصل على عنوان URL
var url = sithelement.get ('data-url') ؛
// حدد ما إذا كان قد تم الضغط على مفتاح CTRL
if (e.metakey || e.ctrlkey || e.button === 1) {
Window.Open (url) ؛
} آخر {
window.location = url ؛
}
}) ؛
قام المؤلف الأصلي بتنفيذ هذه الوظيفة على موقع http://davidwalsh.name/ ، ويجب أن تتذكر ذلك عند استخدام window.location لإعادة توجيه الصفحة. هذا تحسين رمز صغير ، ولكن من المهم للغاية تحسين قابلية الاستخدام!