آموزش جاوا اسکریپت – جلسه ۱۲ – رویدادهای ماوس (Mouse events)

در جلسه 11 سری آموزشی جاوا اسکریپت، درباره نمایش تاریخ و ساعت (Date-Time) در جاوا اسکریپت صحبت کردیم و متدهای مربوط به آن را معرفی کردیم.

در این جلسه می خواهیم تمام رویدادهای موس و property های آنها را معرفی کنیم و آموزش دهیم. دقت کنید که تمام این رویدادهایی که معرفی خواهیم کرد مختص موس نمی باشد بلکه ممکن است از دستگاه های دیگر مانند لمس موبایل یا تبلت نیز رخ دهند.

انواع رویدادهای ماوس:

• رویداد mousedown/mouseup:

وقتی دکمه ماوس روی یک المان کلیک/ یا رها می شود.

• رویداد mouseover/mouseout:

وقتی نشانگر ماوس روی یک المان می آید/ یا از آن خارج می شود.

• رویداد mousemove:

با هر حرکت ماوس روی یک المان، این رویداد رخ می دهد.

• رویداد click:

پس از رویدادهای mouseup و mousedown رخ می دهد و با کلیک کاربر روی دکمه سمت چپ موس رخ می دهد.

• رویداد dblclick:

پس از دو انجام دو کلیک پشت سر هم (با فاصله زمانی بسیار کوتاه) رخ می دهد.

• رویداد contextmenu:

وقتی دکمه سمت راست موس (right-click) فشرده شود رخ می دهد. این رویداد با کلیک روی یکی از کلیدهای کیبورد نیز رخ می دهد. پس صرفا رویدادش مختص موس نمی باشد.

رویدادهای دیگری نیز وجود دارد که در ادامه مقاله بیان خواهیم کرد.

ترتیب اجرای رویدادهای موس:

همانطور که از لیست رویدادهای فوق مشخص است ممکن است با انجام یک کار توسط کاربر چندین رویداد ماوس بطور همزمان رخ دهد. بعنوان مثال وقتی چپ کلیک ماوس رخ می دهد، ابتدا رویداد mousedown رخ می دهد سپس mouseup و در نهایت click.
در تصویر زیر با دابل کلیک روی دکمه رویدادهای مرتبط به ترتیب اجرا خواهند شد:

دکمه های ماوس (Mouse Buttons):

رویدادهای مربوط به کلیک ماوس معمولا شامل property بنام button هستند که به شما این امکان را می دهند که دکمه دقیق موس را بدست آورید. معمولا از این property برای رویدادهای click و contextmenu استفاده نمی شود زیرا مشخص است که رویداد click زمانی رخ می دهد که دکمه سمت چپ موس فشرده شود (left-click) و رویداد contextmenu زمانی اجرا می شود که روی ماوس راست کلیک انجام شود (right-click).

اما رویدادهای mousedown و mouseup ممکن است بر روی هرکدام از دکمه های موس رخ دهد پس استفاده از خاصیت button می تواند در این زمینه به ما کمک کند. مثلا در رویداد mousedown می توان با استفاده از right-mousedown و left-mousedown متوجه شد که کدامیک از دکمه های چپ یا راست کلیک شده است.

مقادیری که event.button می تواند داشته باشد عبارتند از:

اکثر موس ها فقط دو دکمه چپ و راست دارند پس یعنی مقدار button فقط اعداد 0 و 2 می تواند باشد. متد event.buttons هم وجود دارد که شامل دکمه هایی از موس است که در حال حاضر کلیک شده اند.

کلیدهای alt و shift و ctrl و meta:

تمام رویدادهای ماوس شامل property های زیر نیز می باشند:

• shiftKey: دکمه شیفت صفحه کلید
• altKey: دکمه alt در ویندوز (یا opt در مک)
• ctrlKey: دکمه Ctrl
• metaKey: کلید Cmd در مک

در صورتی که در حین رویداد ماوس یکی از property های فوق رخ دهد مقدار آن true می شود.
بعنوان مثال در کد زیر دکمه زمانی کار می کند که همزمان با کلیک چپ ماوس، کلیدهای ترکیبی Alt+Shift نیز از روی کیبورد فشرده شوند.

<button id="button">Alt+Shift+Click on me!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Hooray!');
    }
  };
</script>

جلوگیری از انتخاب شدن متن در هنگام رویداد mousedown:

دبل کلیک روی المان های متنی می تواند منجر به بروز اتفاق ناخواسته و آزاردهنده (مانند انتخاب شدن متن: text selection) شود. بعنوان مثال با دابل کلیک روی تکست زیر متد dblclick فراخوانی می شود.

<span ondblclick="alert('dblclick')">Double-click me</span>

با دابل کلیک روی متن span فوق قسمتی از متن انتخاب می شود که ناخواسته است و ما نمی خواهیم این اتفاق رخ دهد.
برای رفع این مشکل می توان از رویداد mousedown استفاده کرد. به نحوی که با رخ دادن mousedown دستور return false اجرا می شود و باعث می شود متون بطور ناخواسته select نشوند.

Before...
<b ondblclick="alert('Click!')" onmousedown="return false">
  Double-click me
</b>
...After

در این مثال، عبارات before و after به حالت قبل تعریف شده اند (با دابل کلیک متن به حالت انتخاب شده در می آید) اما برای عبارت Double-click me از ترفندی که ذکر کردیم استفاده شده است که با انجام دابل کلیک با ماوس متن انتخاب نخواهد شد.

جلوگیری از کپی کردن متن:

اگر می خواهید کاربران را از کپی کردن متون سایت خود منع کنید (مثلا بدلایل کپی رایت) می توانید با استفاده از متد onCopy به شکل زیر عمل کنید:

<div oncopy="alert('Copying forbidden!');return false">
  Dear user,
  The copying is forbidden for you.
  If you know JS or HTML, then you can get everything from the page source though.
</div>

کپی متن فوق چه توسط کلیدهای ترکیبی ctrl+c انجام شود و چه با ماوس راست کلیک شود و گزینه copy انتخاب شود غیرفعال است و کار نمی کند.

در جلسه بعدی یعنی سیزدهم درباره دو آبجکت ذخیره سازی داده در مرورگر توسط جاوا اسکریپت (LocalStorage و SessionStorage) صحبت خواهیم کرد.