نحوه استفاده از رویدادهای اشاره گر در جاوا اسکریپت

چرا فقط به ورودی ماوس یا صفحه نمایش لمسی توجه کنید؟ با استفاده از رویدادهای اشاره گر، هر دو نوع را با همان مقدار تلاش مدیریت کنید.

نکات کلیدی

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

بسیاری از برنامه های کاربردی وب فرض می کنند که دستگاه اشاره گر کاربر یک ماوس خواهد بود، بنابراین از رویدادهای ماوس برای مدیریت تعاملات استفاده می کنند. با این حال، با ظهور دستگاه های صفحه لمسی، کاربران برای تعامل با وب سایت ها نیازی به ماوس ندارند. پشتیبانی از طیف وسیعی از دستگاه های ورودی برای پاسخگویی به گسترده ترین مخاطبان ضروری است.

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

رویدادهای اشاره گر چیست؟

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

به طور خلاصه، رویدادهای اشاره گر به شما کمک می کند تا بدون توجه به منبع، این گروه از تعاملات کاربر را مدیریت کنید.

انواع رویدادهای اشاره گر

نام رویدادهای اشاره گر مشابه رویدادهای ماوس است که ممکن است قبلاً با آنها آشنا باشید. برای هر mouseEvent در جاوا اسکریپت، یک pointerEvent مربوطه وجود دارد. این بدان معنی است که می توانید کد قدیمی خود را مجدداً مشاهده کنید و برای شروع پشتیبانی از ورودی های لمسی و قلم، “موس” را به “اشاره گر” تغییر دهید.

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

رویدادهای اشاره گر

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

نشانگر پایین

ماوس پایین

اشاره گر

موس

حرکت اشاره گر

حرکت ماوس

برگ اشاره گر

برگ موش

اشاره گر

ماوس بر

نشانگر

mouesenter

اشاره گر

ماوس کردن

لغو اشاره گر

هیچ یک

gotpointercapture

هیچ یک

از دست رفته است

هیچ یک

می توانید ببینید که سه رویداد اشاره گر اضافی بدون رویدادهای ماوس مربوطه وجود دارد. بعداً با این رویدادها آشنا خواهید شد.

استفاده از رویدادهای اشاره گر در جاوا اسکریپت

شما می توانید از رویدادهای اشاره گر به همان روشی که از رویدادهای ماوس استفاده می کنید استفاده کنید. مانند اکثر مدیریت رویداد، فرآیند معمولاً از این الگو پیروی می کند:

1. از انتخابگر DOM برای واکشی یک عنصر استفاده کنید.
2. با استفاده از روش addEventListener، رویداد مورد علاقه خود و یک تابع تماس را مشخص کنید.
3. از ویژگی‌ها و روش‌های آرگومان callback، یک شی رویداد استفاده کنید.

در اینجا یک مثال با استفاده از رویداد pointermove آورده شده است:

// Get the target element
const target = document.getElementById('target');

// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);

// Function to handle pointer move event
function handlePointerMove(ev) {
    // Handle the event however you want to
    target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

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

با استفاده از این کد، زمانی که مکان نما، انگشت یا قلم خود را روی آن حرکت می دهید، عنصری با شناسه «هدف» مختصات اشاره گر را نشان می دهد:

شما می توانید از سایر رویدادهای اشاره گر به همین روش استفاده کنید.

رویداد لغو اشاره گر

رویداد لغو اشاره گر زمانی فعال می شود که یک رویداد اشاره گر دیگر قبل از اینکه عملیات خود را همانطور که در ابتدا در نظر گرفته شده است کامل کند، قطع شود. به طور معمول، مرورگر هر رویداد اشاره‌گری را که قبلاً در عمل بوده است، لغو می‌کند. دلایل زیادی وجود دارد که چرا یک رویداد لغو اشاره گر ممکن است راه اندازی شود، به عنوان مثال:

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

با رویداد لغو اشاره گر، می توانید این موقعیت ها را هر طور که می خواهید مدیریت کنید. در اینجا یک مثال است:

const target = document.getElementById('target');

target.addEventListener('pointercancel', (event) => {
    // Handle the situation where the pointer cancels. For example, you
    // can release the pointer capture
    target.releasePointerCapture(event.pointerId);
});

گرفتن اشاره گر

گرفتن اشاره گر ویژگی است که به یک عنصر خاص HTML اجازه می دهد تا تمام رویدادهای اشاره گر برای یک اشاره گر خاص را بگیرد و به آنها پاسخ دهد، حتی اگر آن رویدادها خارج از مرز عنصر رخ دهند.

شما می توانید با متد setpointercapture() یک اشاره گر را برای یک عنصر تنظیم کنید و با متد releasepointercapture() یک نشانگر را آزاد کنید.

رویدادهای اشاره گر gotpointercapture و lostpointercapture برای گرفتن اشاره گر مفید هستند.

رویداد gotpointercapture

رویداد gotpointercapture هر زمان که عنصری به جذب اشاره گر دست پیدا کند فعال می شود. شما می توانید از این رویداد برای مقداردهی اولیه حالت برای عنصر HTML خود برای مدیریت رویدادهای اشاره گر استفاده کنید. به عنوان مثال، در یک برنامه طراحی، می توانید از رویداد gotpointercapture برای تنظیم موقعیت اولیه مکان نما استفاده کنید.

رویداد Longpointercapture

رویداد lostpointercapture زمانی فعال می‌شود که عنصری ضبط اشاره‌گر را از دست بدهد. می‌توانید از آن برای پاک کردن یا حذف هر حالتی استفاده کنید که هنگام گرفتن اشاره‌گر توسط عنصر ایجاد شده است. در یک برنامه طراحی، ممکن است بخواهید از lostpointercapture برای پنهان کردن مکان نما استفاده کنید.

ویژگی های رویدادهای اشاره گر

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

ویژگی pointerId

pointerId یک ویژگی رویداد اشاره گر است که به شما کمک می کند هر ورودی اشاره گر منحصر به فرد مانند قلم، انگشت یا ماوس را شناسایی کنید. هر ورودی اشاره گر یک شناسه منحصر به فرد دریافت می کند (که به طور خودکار توسط مرورگر ایجاد می شود) که به شما امکان می دهد آنها را ردیابی و عملیات انجام دهید.

یک کاربرد عالی برای ویژگی pointerId یک برنامه بازی است که در آن کاربران به طور همزمان از چندین انگشت یا قلم استفاده می کنند. ویژگی pointerId به شما این امکان را می دهد که با اختصاص یک شناسه منحصر به فرد به هر یک از آنها، سطح هر نشانگر را پیگیری کنید. شناسه اولیه به اولین ورودی اشاره گر اختصاص می یابد.

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

در اینجا یک مثال ساده است که شناسه هر ورودی اشاره گر را در کنسول چاپ می کند:

const target = document.getElementById('target');

target.addEventListener('pointerdown', (event) => {
    console.log(`Pointer ID: ${event.pointerId}`);
    // Handle the pointer down event for the specific pointerId
});

ویژگی pointerType

ویژگی pointerType به شما کمک می کند تا بین انواع مختلف ورودی اشاره گر تمایز قائل شوید و به شما امکان می دهد عملیات را بر اساس آنها انجام دهید. می توانید بین ماوس، قلم و لمس انگشت تفاوت قائل شوید. این ویژگی فقط می‌تواند یکی از سه ورودی رشته را بگیرد: «موس»، «قلم» یا «لمس». در اینجا یک مثال ساده از نحوه استفاده از ویژگی pointerType آورده شده است:

function handlePointerEvent(event){
    // Using the pointerType property
    switch (event.pointerType) {
    case 'mouse':
        // Handle the situation where the pointing device is a mouse
        console.log(`Mouse Pointer ID: ${event.pointerId}`);
        break;
    case 'pen':
        // Handle the situation where the pointing device is a stylus
        console.log(`Stylus Pointer ID: ${event.pointerId}`);
        break;
    case 'touch':
        // Handle the situation where the pointing device is a finger touch
        console.log(`Touch Pointer ID: ${event.pointerId}`);
        break;
    default:
        // Handle other pointer types or cases
        console.log(`pointerType ${event.pointerType} is not supported`);
        break;
    }
}

// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

ویژگی های عرض و ارتفاع

این ویژگی ها عرض و ارتفاع ناحیه تماس اشاره گر را بر حسب میلی متر نشان می دهند. برخی از مرورگرها از آنها پشتیبانی نمی کنند و مقدار آنها همیشه در چنین مرورگرهایی 1 خواهد بود.

یک مورد خوب برای این ویژگی ها در برنامه هایی است که نیاز به ورودی دقیق دارند یا نیاز به تمایز بین اندازه ورودی های مختلف دارند. به عنوان مثال، در یک برنامه طراحی، ارتفاع و عرض بزرگتر ممکن است به این معنی باشد که کاربر با یک حرکت بزرگتر نقاشی می کند و بالعکس.

اغلب اوقات، شما احتمالاً از ویژگی های عرض و ارتفاع برای رویدادهای لمسی استفاده خواهید کرد.

از رویدادهای اشاره گر برای فراگیری بیشتر استفاده کنید

رویدادهای اشاره گر به شما این امکان را می دهند که طیف وسیعی از دستگاه ها و انواع ورودی را بدون تحمل استرس زیاد پاسخ دهید. همیشه باید از آنها در برنامه های خود استفاده کنید تا با استانداردهای مدرن مطابقت داشته باشند و به ساخت وب بهتر کمک کنند.

منبع مقاله