اکشن‌های پیشفرض مرورگر

بسیاری از رویدادها اقدامات خودبه‌خودی از سمت مرورگر را در پی دارند

برای نمونه:

• یک کلیک بر روی لینک – شما را به آدرس موردنظر میرساند
• یک کلیک روی دکمه ارسال فرم – تایید و ارسال فرم به سرور آغاز می‌شود.
• فشردن دکمه ماوس برروی متن و حرکت دادن آن – متن را انتخاب می‌کند

اگر بخواهیم که یک رویداد را در جاوااسکریپت مدیریت کنیم ممکن است نخواهیم تا اکشن پیشفرض مرورگر اتفاق بیفتد و بخواهیم که رفتار متفاوتی به جای آن را پیاده‌سازی کنیم.

جلوگیری از اکشن‌های مرورگر

دو راه برای اینکه به مرورگر بگوییم نمیخواهیم تا رفتار پیشفرض را انجام دهد وجود دارد:

• راه اصلی استفاده از آبجکت event است. متدی به نام ()event.preventDefault وجود دارد.
• اگر هندلر با استفاده از <on<event مشخص شده باشد (نه با addEventListener) آنگاه بازگرداندن مقدار false به همین صورت عمل خواهد کرد.

در این فایل HTML, کلیک بر روی یک لینک منجر به تغییر آدرس مروگر نمی‌شود; مرورگر کاری نمی‌کند:

<a href="/" onclick="return false">اینجا را کلیک کنید</a>
یا
<a href="/" onclick="event.preventDefault()">اینجا</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>. دلایلی مختلفی برای انجام اینکار وجود دارد. برای مثال:

• بسیاری از افراد علاقه دارند تا از "کلیک راست " استفاده کنند و گزینه “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 ); // میتواند لود از سرور یا ساخت UI و مانند آن باشد...

  return false; // از رفتار پیشفرض مرورگر جلوگیری میکند (به آدرس نرو)
};

اگر return false را حذف کنیم آنگاه پس از اجرای کد ما مرورگر “رفتار پیشفرض” خود را انجام خواهد داد – مرورگر شما را به آدرس موجود در href هدایت خواهد کرد. و ما به آن اینجا نیاز نداریم چون میخواهیم که کلیک توسط خودمان مدیریت شود.

درضمن استفاده از event delegation در اینجا منوی ما را بسیار انعطاف پذیر می‌کند. چون می‌توانیم از لیست‌های تودرتو استفاده کرده و آنرا با استفاده از CSS استایل دهیم. مثل استایل “slide down”

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