منابع آموزشی و پژوهشی، برای دانشگاه و مدرسه
پشتیبانیانتشار محتوا
CODEX/سطح ۱؛ مرورگر و رویدادjavascriptpreventDefault()

لغو رفتار پیش‌فرض در جاوااسکریپت

preventDefault در جاوااسکریپت چه می‌کند؟ تفاوت لغو رفتار پیش‌فرض با توقف انتشار، شرط cancelable و نتیجهٔ dispatchEvent را با مثال یاد بگیرید.

مفهوم به زبان ساده

بعضی رویدادها رفتار پیش‌فرض مرورگر دارند؛ برای نمونه، فعال‌کردن پیوند می‌تواند به نشانی آن برود و ارسال فرم ممکن است صفحه را جابه‌جا کند. اگر برنامه قرار است آن کار را به شیوهٔ مشخص دیگری انجام دهد، preventDefault راه اعلام لغو رفتار پیش‌فرض یک رویداد قابل لغو است. این روش را برای هر کلیک یا هر کلید به‌صورت عمومی فراخوانی نکنید.

قابل لغو بودن با cancelable مشخص می‌شود. رویداد سفارشیِ ساخته‌شده با new Event به‌طور پیش‌فرض قابل لغو نیست؛ در نمونه، این گزینه را صریحاً true می‌کنیم. پس از شنونده، defaultPrevented نشان می‌دهد درخواست لغو ثبت شده و dispatchEvent مقدار false برمی‌گرداند. این رخداد سفارشی خودش عمل ذخیره‌سازی یا درخواست شبکه‌ای ندارد؛ فقط قرارداد اعلام لغو را نشان می‌دهد.

لغو رفتار پیش‌فرض، مسیر انتشار رویداد را متوقف نمی‌کند. از سوی دیگر، stopPropagation به‌تنهایی ناوبری یا ارسال فرم را لغو نمی‌کند. در شنوندهٔ passive نیز preventDefault مؤثر نیست. برای تمرین، cancelable را false کنید و تغییر دو خروجی را پیش‌بینی کنید. هنگام ساخت فرم واقعی، رفتار جایگزین، پیام موفقیت و مسیر خطا را هم طراحی کنید؛ لغو ارسال به‌تنهایی تجربهٔ کامل ایجاد نمی‌کند.

کجا به کار می‌آید؟

  • جلوگیری آگاهانه از ارسال عادی فرم هنگام ارائهٔ رفتار جایگزین
  • اعلام لغو یک رویداد سفارشی به کد ارسال‌کنندهٔ آن

از تعریف تا یک مثال واقعی

javascript
const target = new EventTarget();
target.addEventListener('save', (event) => {
  event.preventDefault();
});
const event = new Event('save', { cancelable: true });
console.log(target.dispatchEvent(event));
console.log(event.defaultPrevented);
خروجی مورد انتظار
false
true
کد را تغییر دهید و نتیجه را ببینید.

این مثال چطور کار می‌کند؟

  1. شنونده روی EventTarget مستقل ثبت می‌شود.

  2. رویداد با cancelable: true اجازهٔ لغو دارد.

  3. شنونده پرچم لغو را تنظیم می‌کند؛ dispatchEvent به همین دلیل false می‌دهد.

اشتباه رایج

preventDefault اجرای خود شنونده یا انتشار رویداد را متوقف نمی‌کند. رویداد غیرقابل لغو و شنوندهٔ passive نیز از این درخواست اثر نمی‌گیرند.

این را به خاطر بسپارید

فقط رفتار پیش‌فرض قابل لغو را با جایگزین روشن کنار بگذارید؛ لغو و توقف انتشار دو مفهوم جدا هستند.

بازگشت به نقشهٔ مفاهیم
یکجا انتخاب کن، راحت‌تر دریافت کن

انتخاب‌های من ۰ منبع

مجموعهٔ مطالعه‌ات را بساز.

کنار مقاله‌ها «انتخاب» را بزنید تا چند فایل را با هم دریافت کنید.

انتخاب مقاله‌های رایگان