رویدادهای موس

در این بخش به جزئیاتی درباره‌ی رویدادهای موس و خصوصیات آن‌ها می‌پردازیم.

توجه داشته باشید: این رویدادها نه تنها بواسطه “دستگاه‌های موس”، بلکه بواسطه دستگاه‌های شبیه‌سازی شده تلفن و تبلت نیز روی بدهند.

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

ما قبلا با چند مورد از این رویدادها آشنا شده‌ایم:

mousedown/mouseup

دکمه موس کلیک/رها می‌شود.

mouseover/mouseout

اشاره‌گر موس روی/بیرون عنصر می‌رود.

mousemove

هر حرکت موس روی عنصر این رویداد را فرامی‌خواند.

click

درصورتی که کلید چپ موس استفاده شود، این رویداد بعد از mousedown و سپس mouseup‍ روی یک عنصر فراخوانده می‌شود.

dblclick

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

contextmenu

زمانی که کلید راست موس فشرده روی یک عنصر فشرده شود فراخوانده می‌شود. راه‌های دیگری برای باز کردن منوی زمینه وجود دارد. برای مثال استفاده از یک کلید مخصوص در کیبورد این رویداد را نیز فراخوانی می‌کند، پس این دقیقا یک رویداد موس نیست.‌

…چندین رویداد دیگر وجود دارند که بعدا آنهارا برسی می‌کنیم.

ترتیب رویدادها

همان‌طور که در لیست بالاهم مشاهده کردید، یک عمل کاربر می‌تواند باعث فراخوانی چند رویداد شود.

برای مثال، یک کلیک چپ ابتدا mousedown‍ را فراخوانی می‌کند، هنگامی که کلید فشرده می‌شود، سپس mouseup‍ و click زمانی که کلید رها می‌شود.

در مواقعی که یک عمل از سمت کاربر باعث فراخوانی چند رویداد شود، ترتیب آنها ثابت خواهد بود. به این معنی که کنترل‌کننده‌ها به ترتیب mousedown → mouseup → click صدا زده خواهند شد.

روی دکمه زیر کلیک کنید تا رویدادها را ببینید. دابل کلیک را هم امتحان کنید.

در قسمت آزمایشی زیر همه رویدادهای موس (mouse) چاپ می‌شوند، و اگر بیش از ۱ ثانیه فاصله زمانی بین آن‌ها باشد، توسط یک خط افقی جدا می‌شوند.

همچنین می‌توانیم یک خاصیت button مشاهده کنیم که به ما این امکان را می‌دهد تا کلید موس را شناسایی کنیم که در قسمت پایین شرح داده شده.

کلید موس

رویدادهای مربوط به کلیک‌کردن همیشه یک خاصیت button خواهند داشت، که به ما این امکان را می‌دهد کلید موس را دقیقا تشخیص دهیم.

ما معمولا این خاصیت را برای رویدادهای click و contextmenu استفاده نمی‌کنیم،‌ زیرا اولی فقط با کلیک چپ، و دومی با کلیک راست اتفاق می‌افتد.

از طرف دیگر، کنترل‌کننده‌های mousedown و mouseup‍‍ ممکن است به event.button نیاز پیدا کنند، زیرا این رویدادها به واسطه هر کلیدی اتفاق می‌افتند، پس button این امکان را می‌دهد تا “کلیک کلید راست” و “کلیک کلید چپ” موس را تشخیص دهیم.

مقادیر قابل قبول برای event.button:

بیشتر موس‌ها فقط کلید چپ و راست را دارند، پس مقادیر احتمالی 0 و 2 هستند. دستگاه‌های لمسی نیز هنگامی که روی آنها ضربه زده شود رفتار مشابهی‌ را ایجاد می‌کنند.

همچنین خصوصیت event.buttons همه کلیدهایی که هم اکنون فشرده شده‌اند را دارد، یک بیت به ازای هر کلید. در عمل این خصوصیت به ندرت استفاده می‌شود، در صورت نیاز، می‌توانید جزئیات بیشتری را MDN پیدا کنید.

اصلاح‌کننده‌ها: shift, alt, ctrl و meta

همه رویدادهای موس اطلاعاتی درباره کلیدهای اصلاح‌کننده دارند.

خصوصیات رویداد:

• shiftKey: Shift
• altKey: Alt (یا Opt برای مک)
• ctrlKey: Ctrl
• metaKey: Cmd برای مک

مقادیر آنها در صورتی که کلید اشاره‌شده در حین رویداد فشرده شده بود، true است.

برای مثال، کلید زیر تنها روی Alt+Shift+کلیک کار می‌کند:

<button id="button">روی من Alt+Shift+کلیک کنید</button>

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

مختصات: clientX/Y, pageX/Y

همه رویدادهای موس مختصاتی را به دو صورت در اختیار ما قرار می‌دهند:

1. مربوط به پنجره: clientX و clientY.
2. مربوط به سند: pageX و pageY.

ما قبلا درباره تفاوت آنها در بخش Coordinates صحبت کرده‌ایم.

به اختصار، مختصات مربوط به سند pageX/Y از گوشه‌ی بالا چپ سند محاسبه می‌شوند و زمانی که صفحه پیمایش شود تغییر نمی‌کنند، درصورتی که clientX/Y از گوشه بالا چپ پنجره فعلی شمرده می‌شوند. زمانی که صفحه پیمایش شود، تفییر می‌کنند.

برای مثال، اگر یک پنجره با اندازه 500x500 داشته باشیم، و اشاره‌گر موس در گوشه بالا چپ باشد، پس clientX و clientY مقدار 0 خواهند داشت، بدون توجه به اینکه صفحه چقدر پیمایش شده باشد.

و اگر اشاره‌گر موس در وسط باشد، پس clientX و clientY مقدار 250 خواهند داشت بدون توجه به اینکه کجای سند قرار دارند. از این نظر مانند position:fixed هستند.

موس را روی قسمت ورودی ببرید تا مقادیر clientX/clientY ببینید (مثال در iframe وجود دارد, پس مقادیر نسبت به آن iframe خواهند بود):

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="موس را روی من ببر">

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

دابل کلیک موس یک اثر جانبی دارد که در بعضی از رابطه‌های کاربری ممکن است مزاحم باشد: متن را انتخاب می‌کند.

برای مثال، دابل کلیک کردن روی متن زیر آنرا انتخاب می‌کند که در کنترل‌کندده ما تعریف نشده:

<span ondblclick="alert('dblclick')">من را دوبار کلیک کن</span>

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

راه های مختلفی برای جلوگیری از آن انتخاب وجود دارد، که می‌توانید در بخش Selection و Range مشاهده کنید.

منطقی‌ترین راه در این مورد به خصوص این است که از رفتار پیش‌فرض مرورگر هنگام mousedown جلوگیری کنیم. این کد از انتخاب هر دو این‌ها جلوگیری می‌کند:

قبل...
<b ondblclick="alert('کلیک!')" onmousedown="return false">
  من را دوبار کلیک کن
</b>
...بعد

اکنون قسمت پررنگ، هنگام دابل کلیک قابل انتخاب نیست و کلیک چپ روی آن، انتخاب کردن متن را آغاز نمی‌کند.‎

توجه داشته باشید: متن داخل آن هنوز قابل انتخاب است. هرچند، انتخاب نباید از روی خود متن، بلکه از قبل یا بعد آن آغاز شود. معمولا کاربران با این رفتار مشکلی ندارند.

<div oncopy="alert('کپی کردن ممنوع!');return false">
  کاربر عزیز,
  کپی کردن برای شما ممنوع شده است.
  هرچند اگر که اچ‌تی‌ام‌ال یا جاوااسکریپت بلد هستید، می‌توانید هرچه نیاز دارید از سورس صفحه پیدا کنید.
</div>

خلاصه

رویداد‌های موس این خصوصیات‌را دارند:

• کلید: button.

• کلید‌های اصلاح‌کننده (true اگر فشار داده‌شوند): altKey, ctrlKey, shiftKey و metaKey (مک).

  • اگر می‌خواهید که Ctrl را کنترل کنید، کاربران مک‌را فراموش نکنید،‌آنها معمولا از Cmd استفاده می‌کند. پس بهتر این است که if (e.metaKey || e.ctrlKey) چک شود.

• مختصات مربوط به پنجره: clientX/clientY.

• مختصاب مربوط به سند: pageX/pageY.

رفتار پیشفرض مروگر در هنگام mousedown انتخاب متن است. اگر این برای رابط کاربری شما مناسب نیست، پس باید از آن جلوگیری شود.

در بخش بعدی ما با جزئیات بیشتری درباره رویدادهایی که حرکت اشاره‌گر موس‌را دنبال می‌کنند، و همچنین با چگونگی شناسایی تغییرات عنصر زیر آن‌ آشنا خواهیم شد.