الإجراءات الافتراضية للمتصفح

تؤدي العديد من الأحداث تلقائيًا إلى إجراءات معينة يقوم بها المتصفح.

:على سبيل المثال

• النقر على رابط – يبدأ الانتقال إلى URL الخاص به.
• النقر على زر إرسال النموذج – يبدأ تقديم البيانات إلى الخادم server.
• النقر على زر الماوس فوق النص مع الحركة – يقوم بتحديد النص.

إذا تعاملنا مع حدث في الجافا اسكريبت ، يمكن ألا نرغب في تنفيذ إجراء المتصفح المقابل لهذا الحدث ، ونريد تنفيذ سلوك آخر بدلاً من ذلك.

منع إجراءات المتصفح

:هناك طريقتان لإخبار المتصفح أننا لا نريده أن يعمل

• الطريقة الرئيسية هي استخدام كائن الحدث event. هناك طريقة event.preventDefault().
• إذا تم تعيين المعالج handler باستخدام on<event> (وليس عن طريق addEventListener)ØŒ عندئذ فإن ارجاع القيمة false يعمل بنفس الطريقة.

:في هذه الصفحة النقر على الرابط لا يؤدي إلى التنقل، ولا يقوم المتصفح بأي شيئ

<a href="/" onclick="return false">Click here</a>
أو
<a href="/" onclick="event.preventDefault()">here</a>

.في المثال التالي سنستخدم هذه التقنية لإنشاء قائمة مدعومة من الجافا اسكريبت

مثال: القائمة

:قائمة موقع مثل هذه

<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

وهكذا تبدو بإضافة CSS:

عناصر القائمة مستخدمة Ùƒ <a>ØŒ وليس أزرار <button>. :هناك عدة أسباب لفعل ذلك، على سبيل المثال

• العديد من الأشخاص يفضلون استخدام “right click” – “open in a new window”. إذا استخدمنا <button> أو <span>ØŒ لن نستطيع فعل ذلك.
• تتبع محركات البحث <a href="..."> الروابط أثناء الفهرسة.

لذلك نستخدم <a> في الترميز.لكننا عادةً نعتزم التعامل مع النقرات في الجافا اسكريبت. لذلك يجب علينا منع إجراء المتصفح الافتراضي.

:مثلما هو الحال هنا

menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;

  let href = event.target.getAttribute('href');
  alert( href ); // ...يمكن تحميله من الخادم ، وإنشاء واجهة المستخدم وما إلى ذلك

  return false; // منع إجراء المتصفح (لا تذهب إلى URL)
};

إذا حذفنا إرجاع خطأ ØŒ فبعد تنفيذ الكود الخاص بنا ØŒ سيقوم المتصفح بتنفيذ الإجراء الافتراضي – الانتقال إلى عنوان URL في href. ولسنا بحاجة إلى ذلك هنا ØŒ لأننا نتعامل مع النقر بأنفسنا.

بالمناسبة استخدام تفويض الحدث event delegation يجعل قائمتنا مرنة للغاية. يمكننا إضافة قوائم متداخلة وتصميمها باستخدام CSS “slide down للانزلاق إلى أسفل”.

<input value="Focus works" onfocus="this.value=''">
<input onmousedown="return false" onfocus="this.value=''" value="Click me">

passive "خيار المعامل "الخامل

الاختيار الغير إلزامي passive: true خيار addEventListener يشير إلى المتصفح بأن المعالج لن يستدعي الأمر preventDefault().

لماذا قد تكون هناك حاجة لذلك؟

هناك بعض الأحداث مثل touchmove على أجهزة المحمول (عندما يحرك المستخدم إصبعه عبر الشاشة)ØŒ هذا يتسبب في scrolling افتراضي ØŒ ولكن يمكن منع هذا باستخدام PreventionDefault () في المعالج.

لذا عندما يكتشف المتصفح حدثاً كهذا، تحتاج في البداية إلى العمل على كل المعالجات، ثم إذا لم يتم مناداة preventDefaultفي أي مكان، يمكن أن تستمر مع scrolling. قد يتسبب هذا في تأخيرات لا داعي لها “jitters” في UI.

الخيار passive: true يخبر المتصفح أن المعالج لن يقوم بإلغاء scrolling. بعد ذلك يقوم المتصفح فوراً بالحركة scroll مقدماً بذلك أقصى تجربة سلسة، ويتم التعامل مع الحدث .

بالنسبة لبعض المتصفحات (FirefoxØŒ Chrome)ØŒ passive يكونtrue بشكل افتراضي لحدث touchstart Ùˆ touchmove.

event.defaultPrevented

الخاصية event.defaultPrevented تكون صحيحة إذا تم منع الإجراء الافتراضي، Ùˆ تكون خطأ في الحالة المغايرة.

هناك حالة استخدام مثيرة للاهتمام لذلك.

هل تتذكر في فصل التدفق Ùˆ الإلتقاط تحدثنا عن event.stopPropagation() أمر سيئ؟ bubbling ولماذا إيقاف

بدلاً من ذلك أحياناً يمكننا استخدام event.defaultPreventedØŒ للإشارة إلى معالجات الأحداث الأخرى بأنه تم التعامل مع الحدث.

لنرى مثالاً عملياً.

المتصفح افتراضياً في حدثcontextmenu (النقر على الزر الأيمن للفأرة) يعرض context menu بخيارات قياسية. يمكننا منع :ذلك وإظهار القائمة الخاصةبنا، مثل

<button>Right-click shows browser context menu</button>

<button oncontextmenu="alert('Draw our menu'); return false">
  Right-click shows our context menu
</button>

الآن ، بالإضافة إلى قائمة السياق هذه ، نود تنفيذ قائمة السياق على مستوى المستند.

عند النقر بزر الماوس الأيمن ، يجب أن تظهر أقرب قائمة سياق.

<p>Right-click here for the document context menu</p>
<button id="elem">Right-click here for the button context menu</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Button context menu");
  };

  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Document context menu");
  };
</script>

المشكلة هنا أنه عند النقر على elemØŒ نحصل على قائمتين: مستوى الزر button-level Ùˆ (the event bubbles up) القائمة على مستوى المستند.

كيف نصلح ذلك؟ أحد الحلول هو التفكير مثل: “عندما نتعامل مع النقر بزر الماوس الأيمن في معالج الزر ØŒ فلنتوقف عن الفقاعة” ولنستخدم event.stopPropagation():

<p>Right-click for the document menu</p>
<button id="elem">Right-click for the button menu (fixed with event.stopPropagation)</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    event.stopPropagation();
    alert("Button context menu");
  };

  document.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Document context menu");
  };
</script>

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

الحل البديل هو التحقق من معالج المستند . إذا ما تم منع الإجراء الافتراضي؟ إذا كان كذلك إذاً فقد تم العامل مع الحدث ولسنا بحاجة للرد عليه.

<p>Right-click for the document menu (added a check for event.defaultPrevented)</p>
<button id="elem">Right-click for the button menu</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("Button context menu");
  };

  document.oncontextmenu = function(event) {
    if (event.defaultPrevented) return;

    event.preventDefault();
    alert("Document context menu");
  };
</script>

والآن كل شيئ يعمل بشكل صحيح. إذاكان لدينا عناصر متداخلة nested elementsØŒ ولكل منهم قائمة سياق خاصة به، فذلك سوف يعمل أيضاً. فقط تأكد من التحقق من event.defaultPrevented في كل معالج contextmenu.

الملخص

:هناك العديد من إجراءات المتصفح الافتراضية

• mousedown – يبدأ التحديد (حرك الماوس للتحديد).
• click على <input type="checkbox"> – يختار/يزيل اختيار input.
• submit – النقر على <input type="submit"> أو ضغط مفتاح Enter داخل حقل النموذج يتسبب في حدوث هذا الحدث ØŒ ويقوم المتصفح بإرسال النموذج بعده.
• keydown – قد يؤدي الضغط على مفتاح إلى إضافة حرف إلى حقل أو إجراءات أخرى.
• contextmenu – يحدث الحدث عند النقر بزر الماوس الأيمن ØŒ يتمثل الإجراء في إظهار قائمة سياق المتصفح.
• …وهناك أكثر…

يمكن منع جميع الإجراءات الافتراضية إذا أردنا التعامل مع الحدث حصريًا بواسطةالجافا اسكريبت.

لمنع حدوث إجراء افتراضي – استخدم إما event.preventDefault() أو return false. الطريق الثانية عمل فقط مع المعالجات المعنية ب on<event>.

خيار passive: true الخاص ب addEventListener يخبر المتصفح أنه لن يتم منع الإجراء. وهذا مفيد لبعض الأحداث في الهواتف المحمولة، مثل touchstart Ùˆ touchmoveØŒ لإخبار المتصفح بأنه يجب ألا ينتظر حتى تنتهي جميع المعالجات قبل التمرير scrolling.

إذا تم منع لحدث الافتراضي، فإن قيمة event.defaultPrevented تصبح trueØŒ وإلا فهي تكون false.