از ویژگی pointer-events جهت کنترل شرایطی که یک عنصر گرافیکی تحت تاثیر رویداد نشانگر موس قرار بگیرد، بهره بری و استفاده می می شود.

ویژگی pointer-events از ویژگی های مرتبط به SVG می باشد و همچنین اکثرا و بیشتر مقادیر آن هم تنها و فقط بر روی عناصر SVG قابل اعمال خواهند بود و همچنین تنها و فقط تعداد کمی از آنها بر روی عناصر HTML تاثیر می گذارند.

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

سینتکس و همچنین مقادیر آن ویژگی بصورت زیر می باشد:

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

در صورتی که بخواهیم که یک عنصر به رویدادهای موس جواب دهد از مقدار auto و همچنین در غیر آن صورت از مقدار none جهت آن ویژگی بهره بری و استفاده می کنیم.

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

در صورتی که عنصری شامل ویژگی pointer-events با مقدار none باشد آن رفتار به فرزندان آن هم عنصر هم به ارث می رسد پس در صورتی که بخواهیم که فرزندان آن رفتار را نداشته باشند بایستی و حتما جهت آنها نیز آن ویژگی را تعریف کنیم و همچنین مقدار آن هم را برابر با auto قرار بدهیم.

auto

auto مقدار ابتدایی و اولیه جهت آن ویژگی می باشد و همچنین باعث فعال بودن رویدادهای موس و همچنین لمس جهت عنصر می می شود.

none

مقدار none جهت ویژگی pointer-events باعث غیر فعال شدن رویدادهای موس از قبیل کلیک، focus، hover و همچنین active می می شود. همچنین در صورتی که جهت عنصر یک cursor خاص در نظر گرفته باشیم، آن هم نیز غیر فعال خواهد شد.

.you-cant-touch-me-p 
pointer-events: none;

دموی زیر را بررسی کردن کنید، در آن دمو یک لایه روی عناصر کشیده شده می باشد و همچنین آن لایه زیرا و به درستی که ویژگی pointer-events با مقدار none دارد هیچگونه جوابی به کلیک ها و همچنین رویدادهای موس نمی دهد و همچنین حتی آن امکان جهت ما وجود دارد تا با عناصر زیر آن هم نیز در ارتباط باشیم:

.overlay 
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25);

pointer-events: none;

See the Pen pointer-events by Mojtaba Seyedi (@seyedi) on CodePen.

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

پشتیبانی نرم افزار مرورگر اینترنتی ها