pointer-events

از ویژگی 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 کاربردهای بسیار موثر و جالبی می تواند داشته باشد. به عنوان نمونه در ساخت زیر‌منو‌ها می توان از این ویژگی بهره برد، همچنین برای اسکرولی با کارایی بهتر می توان از این ویژگی استفاده کرد.

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

4 دیدگاه برای “pointer-events

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *