نشانگرها و نشانگرها

در دستگاه‌های غیر لمسی، مکان‌نما یک راه ضروری برای کاربران شما است تا بدانند با چه چیزی در حال تعامل هستند. همچنین می‌توانید نکات مفیدی در مورد نحوه تعامل با یک عنصر یا نحوه تأثیر حرکت با ترک‌پد یا ماوس بر سایت شما ارائه دهید.

نشانگرها

مرورگرها به طور خودکار برخی از موارد استفاده رایج برای مکان نما را کنترل می کنند.

اگر در حال خواندن این مطلب در دستگاهی با مکان نما هستید، صفحه را کاوش کنید. ممکن است قبلاً متوجه تغییر مکان نماها نشده باشید، اما به نکاتی که ارائه می دهد توجه کنید. وقتی اشاره گر شما روی متن می رود، مکان نما به یک پرتو I تغییر می کند که نشان می دهد می توانید متن را انتخاب کنید. اگر ماوس را روی پیوندی نگه دارید، مکان‌نما به دستی تبدیل می‌شود که با انگشت اشاره نشان می‌دهد و نشان می‌دهد که می‌توانید اقدامی انجام دهید. هر جای دیگری یک مکان نما پیش فرض خواهد داشت که اغلب یک فلش است.

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

مرورگرها طیفی از کلمات کلیدی را برای ویژگی مکان نما پشتیبانی می کنند که نکاتی را برای کشیدن، تغییر اندازه، انتخاب و موارد دیگر ارائه می دهد.

اگر هیچ یک از مکان‌نماهای پشتیبانی‌شده، تعاملات یک عنصر را با یکدیگر ارتباط برقرار نمی‌کنند، می‌توانید یک تصویر SVG یا PNG نیز برای استفاده به عنوان مکان‌نما ارائه کنید.

کارتس

برای نشان دادن موقعیت شما در متن قابل ویرایش از یک جعبه درج استفاده می شود. این با نشانگر شما متفاوت است، زیرا از ماوس شما پیروی نمی کند. می توانید رنگ را با caret-color تغییر دهید.

پاسخ به ورودی های اشاره گر کاربر

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

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

اطمینان از اینکه دکمه ها و سایر اهداف تعاملی شما به اندازه کافی بزرگ هستند، گام مهمی برای اطمینان از دسترسی به سایت شما است. همچنین می‌توانید استایل‌های خود را بر اساس دقت دستگاه‌های ورودی کاربر با جستجوهای رسانه‌ای pointer و any-pointer سفارشی کنید.

ویژگی pointer اشاره گر به دستگاه ورودی اصلی کاربر اشاره دارد، در حالی که any-pointer به همه دستگاه های ورودی اشاره دارد. می‌توانید دستگاه‌هایی مانند موش‌ها را با fine و دستگاه‌هایی مانند صفحه‌نمایش لمسی را با coarse مطابقت دهید. مقدار none نشان می دهد که کاربر از دستگاه ورودی با اشاره گر استفاده نمی کند.

اشاره گر و رویدادهای لمسی

غیرفعال کردن حرکات خاص صفحه لمسی

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

برای انصراف از مرورگر که برخی از عملکردها را انجام می دهد، اقداماتی را که می خواهید این عنصر انجام دهد فهرست کنید. pan-x و pan-y حرکات متحرک با تک انگشت را فعال می کنند. اینها را می توان همراه با pinch-zoom فعال کرد که امکان بزرگنمایی و جابجایی چند انگشتی را فراهم می کند.

کلمه کلیدی manipulation معادل pan-x pan-y pinch-zoom است. manipulation سایر رفتارهای لمسی را که به چندین لمس در زمان کوتاه نیاز دارند، مانند دو ضربه زدن برای بزرگنمایی، حذف می کند.

بعد از اینکه مدیریت یک عملکرد را با حذف آن از touch-action غیرفعال کردید، می توانید رویدادهای اشاره گر را برای آن عملکرد تنظیم کنید.

غیرفعال کردن همه رویدادها و اقدامات

در برخی موارد، ممکن است بخواهید مشخص کنید که یک عنصر تعاملی نیست. برای مثال، با تنظیم pointer-events: none روی یک دکمه، نمی توانید روی دکمه کلیک کنید، یا حتی حالت شناور را راه اندازی نمی کنید.

درک خود را بررسی کنید