بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
تیر ۲۵, ۱۳۹۷ admin آموزش پیشرفته css, آموزش مقدماتی css 0
از ویژگی 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
مقدار ابتدایی و اولیه جهت آن ویژگی می باشد و همچنین باعث فعال بودن رویدادهای موس و همچنین لمس جهت عنصر می می شود.
مقدار 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
کاربردهای خیلی زیاد موثر و همچنین جالبی می تواند داشته باشد. به عنوان نمونه در ساخت زیرمنوها می قدرت از آن ویژگی بهره برد، همچنین جهت اسکرولی با کارایی بهتر می قدرت از آن ویژگی بهره بری و استفاده کرد.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0