آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 55) : کار با ویژگی pointer-events

آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 55) : کار با ویژگی pointer-events

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی Shape-outside توضیحاتی رو قرار دادیم و مثالهایی رو زدیم تا شما رو با قابلیتهای اون آشنا کنیم. در این جلسه میخوایم کار با ویژگی pointer-events و کاربردهای اون رو به شما توضیح بدیم.

مقدمات مربوط به Pointer-events

شما با استفاده از این ویژگی میتونین مشخص کنید که تحت چه شرایطی المنت مورد نظر میتونه هدف یا target رویدادهای ماوس قرار بگیره. در کامپیوتر رویدادهای مربوط به ماوس و در موبایل و . رویدادهای مربوط به Touch مانند Tap مورد نظر است. بصورت زیر میتونین از این ویژگی استفاده کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* 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;

میبینید که مقادیر مختلف و زیادی برای این ویژگی وجود دارد و میتونین از اونا استفاده کنید. همونطور که مشاهده میکنید در مقابل بعضی از اونا SVG only نوشته شده است و به این معنی می باشد که این مقادیر فقط برای المنتهای SVG کاربرد دارند و نمیتونین از اونا برای HTML استفاده کنید. پس میبینید که این ویژگی در اصل برای SVG به وجود اومده و هر مرورگری که از SVG پشتیبانی میکنه، از این ویژگی نیز پشتیبانی میکنه. اما برای المنت های HTML فقط 2 مقدار none و auto کار می کند. از مقدار inherit نیز میتونین برای المنتهای HTML استفاده کنید و با اینکار المنت فرزند، مقدار این ویژگی رو از والد خودش به ارث میبره.

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

تقریبا 90% مرورگرهایی که کاربران از اونا استفاده میکنند، از این ویژگی پشتیبانی می کنند.

همونطور که میبینید فقط مرورگر Opera Mini و مرورگرهای قدیمی Internet Explorer با این ویژگی مشکل دارند (درون مرورگرهای قدیمی IE که از SVG پشتیبانی میکنند، میتونین از این ویژگی برای المنتهای SVG استفاده کنید ولی برای المنتهای HTML پشتیبانی نمی شوند).

بیشتر کارهایی که این ویژگی انجام میده، شبیه به Javascript است و خیلی به CSS نمیخوره. pointer-events میتونه از موارد زیر جلوگیری بکند:

• اعمال کلیک شدن رو جلوگیری میکنه. مثلا با استفاده از این ویژگی میشه کاری کرد که اگر بر روی لینک کلیک کنیم، به هیچ جایی منتقل نشیم و اصلا واکنشی نشون نمیده.
• شکل ماوس مربوط به اون المنت نمایش داده نمیشه
• حالت هاور و active برای المنت انجام نمیشه
• رویدادهای مربوط به ماوس در Javascript دیگه اجرا نمیشن

میبینید که این ویژگی قدرت زیادی دارد و میتونین از اون بهره ببرید.

مثال کاربردی اول

مثال زیر رو در نظر بگیرید:

ایرانی pointer ,events ,ویژگی ,only ,استفاده ,میتونین ,pointer events ,استفاده کنید ,برای المنتهای ,ویژگی pointer ,رویدادهای مربوط ,ویژگی pointer events منبع