ویژگی pointer-events در CSS برای کنترل نحوه پاسخگویی یک عنصر به رویدادهای نشانگر مانند کلیک‌های موس، برداشت‌های موس، و حرکات موس استفاده می‌شود. این ویژگی به شما امکان می‌دهد تا مشخص کنید آیا یک عنصر باید رویدادهای نشانگر را دریافت کند و آیا این رویدادها باید عملیاتی مانند کلیک یا برداشت را فعال کنند یا نه.
مقادیر ممکن این ویژگی عبارتند از:
-
auto: این مقدار پیش‌فرض است. این نشان می‌دهد که عنصر به صورت عادی عمل می‌کند و به رویدادهای نشانگر بر اساس ویژگی‌های CSS و محتوای مشخص شده خود پاسخ می‌دهد. در محتوای SVG، این مقدار و visiblePainted تأثیر یکسانی دارند.
-
none: این مقدار نشان می‌دهد که عنصر باید به رویدادهای نشانگر پاسخ ندهد. کلیک‌ها، اثرات هوور و تعاملات دیگر از عنصر عبور خواهند کرد و عناصر زیر آن این رویدادها را به جای آن دریافت خواهند کرد.
-
visiblePainted: این مقدار نشان می‌دهد که عنصر تا زمانی که رویدادهای نشانگر بر روی یک منطقه قابل رویت و رنگارنگ از عنصر ایجاد شده‌اند پاسخ نخواهد داد. مناطق شفاف درون عنصر به رویدادهای نشانگر پاسخ نمی‌دهند.
-
visibleFill: مشابه visiblePainted، این مقدار نشان می‌دهد که عنصر فقط به رویدادهای نشانگر ایجاد شده در مناطق قابل رویت و پر شده عنصر پاسخ می‌دهد و از رویدادها در مناطق شفاف صرف‌نظر می‌کند.
-
visibleStroke: مشابه visiblePainted و visibleFill، این مقدار نشان می‌دهد که عنصر فقط به رویدادهای نشانگر ایجاد شده در مناطق قابل رویت و خطوط حاشیه عنصر پاسخ می‌دهد و از رویدادها در مناطق شفاف صرف‌نظر می‌کند.
-
visible: به رویدادهای نشانگر هدفی می‌شود که ترکیب از fill و stroke آن‌ها نیست و تنها زمانی که پدیده‌پذیری به visible تنظیم شده باشد، پاسخ دهد.
-
painted: این مقدار نشان می‌دهد که عنصر فقط به رویدادهای نشانگر ایجاد شده در محتوای رنگارنگ خود پاسخ می‌دهد و مناطق شفاف درون عنصر به رویدادهای نشانگر پاسخ نمی‌دهد.
-
fill: مشابه painted، این مقدار نشان می‌دهد که عنصر فقط به رویدادهای نشانگر ایجاد شده در fill خود پاسخ می‌دهد و از رویدادها در مناطق شفاف صرف‌نظر می‌کند.
-
stroke: مشابه painted و fill، این مقدار نشان می‌دهد که عنصر فقط به رویدادهای نشانگر ایجاد شده در stroke خود پاسخ می‌دهد و از رویدادها در مناطق شفاف صرف‌نظر می‌کند.
Points To Remember
-
پیش‌فرض برای SVG: وقتی که این ویژگی تعریف نشده است، محتوای SVG ویژگی‌های مشابه مقدار visiblePainted را دارد. این بدان معناست که در SVG، اگر این ویژگی تعیین نشده باشد، رفتار عنصر مانند رفتار ویژگی visiblePainted خواهد بود.
-
تاثیر یک مقدار بر روی رویدادهای نشانگر: استفاده از یک مقدار در pointer-events نه تنها عنصر را به عنوان هدف رویداد نشانگر می‌کند، بلکه به رویداد اجازه می‌دهد که از طریق عنصر عبور کند و به آنچه که زیر عنصر است هدف شود.
-
غیرفعال‌سازی رویدادهای نشانگر بر روی عنصر: غیرفعال‌سازی رویدادهای نشانگر بر روی یک عنصر با استفاده از pointer-events به این معنا نیست که گوش کنندگان رویداد (event listeners) فعال نخواهند شد. اگر یک فرزند از آن عنصر pointer-events را فعال کند تا به عنوان هدف رویداد باشد، رویدادهایی که به فرزند هدف شده‌اند، از طریق والدین عبور می‌کند و ممکن است گوش‌کنندگان رویداد فعال شوند. با این حال، اگر فعالیت نشانگر در یک منطقه‌ای که تنها توسط والدین پوشیده شده باشد، رخ دهد، هم فرزند و هم والدین آن را از دست می‌دهند.
-
تمرکز از طریق کلید Tab: عناصر با pointer-events: none هنوز هم توسط ناوبری صفحه‌به‌صفحه‌ای با کلید Tab تمرکز دریافت می‌کنند.
none Value
ویژگی pointer-events با مقدار “none” مشخص می‌کند که یک عنصر به رویدادهای نشانگر پاسخ ندهد و بنابراین از رویدادهای نشانگر گذشته و به عناصر زیرین اجازه می‌دهد که این رویدادها را دریافت کنند. در واقع، با استفاده از این مقدار، عنصر به صورت غیرفعال تبدیل می‌شود و هیچگونه پاسخی به رویدادهای نشانگری مانند کلیک یا هوور داده نمی‌شود.
در مثال ارائه شده، ویژگی pointer-events برای عنصری با ویژگی href برابر با “https://tutorialspoint_css_pointer-event.com” تنظیم شده است. این به این معنی است که این ویژگی تنها بر روی پیوندی با آدرس مشخص شده اعمال می‌شود.
بنابراین، هنگامی که کاربر بر روی پیوند کلیک می‌کند، هیچ اتفاقی نمی‌افتد و پیوند مرتبط به “https://tutorialspoint_css_pointer-event.com” قابل دسترس نیست. این ویژگی مفید است زمانی که نیاز است که یک عنصر را از تعامل کاربر با رویدادهای نشانگر محافظت کرد یا از آن جلوگیری شود.
<html>
<head>
<style>
a[href="https://tutorialspoint_css_pointer-event.com"] {
pointer-events: none;
}
</style>
</head>
<body>
<a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a>
</body>
</html>auto Value
ویژگی pointer-events با مقدار “auto” به معنی به حالت پیش‌فرض برگرداندن عملکرد عنصر نسبت به رویدادهای نشانگر است. به این معنی که عنصر به صورت عادی و بر اساس تنظیمات CSS و محتوای خود به رویدادهای نشانگر پاسخ می‌دهد.
در مثال ارائه شده، ویژگی pointer-events برای عنصری با ویژگی href برابر با “https://tutorialspoint_css_pointer-event.com” تنظیم شده است. با تنظیم این ویژگی به “auto”، عملکرد عادی از نظر رویدادهای نشانگر برای عنصر فعال می‌شود.
بنابراین، هنگامی که کاربر بر روی پیوند کلیک می‌کند، رویداد کلیک اتفاق می‌افتد و کاربر به “https://tutorialspoint_css_pointer-event.com” هدایت می‌شود. این ویژگی مفید است زمانی که نیاز است که یک عنصر قابلیت پاسخگویی به رویدادهای نشانگر را داشته باشد و عملکرد آن را به حالت پیش‌فرض برگرداند.
<html>
<head>
<style>
a[href="https://tutorialspoint_css_pointer-event.com"] {
pointer-events: auto;
}
</style>
</head>
<body>
<a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a>
</body>
</html>Disabling Pointer Events on Images
در مثال ارائه شده، ویژگی pointer-events برای عنصر تصویر (img) تنظیم شده است تا به مقدار “none”، به این معنی که عنصر تصویر به رویدادهای نشانگر پاسخ ندهد، اعمال شود.
با این تنظیم، تمام رویدادهای نشانگر مانند کلیک، برداشتن موس و … بر روی تصویر غیرفعال می‌شوند. به عبارت دیگر، کاربر نمی‌تواند بر روی تصویر کلیک کند یا آن را هوور کند و هیچگونه عملیاتی که برای رویدادهای نشانگر تعریف شده‌اند، انجام نمی‌شود.
در نتیجه، این ویژگی می‌تواند مفید باشد زمانی که نیاز است که یک تصویر به صورت دستورالعملی نباشد و کاربر نتواند بر روی آن کلیک کند یا با آن تعامل داشته باشد.
<html>
<head>
<style>
img {
height: 100px;
width: 100px;
pointer-events: none;
}
</style>
</head>
<body>
<img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام