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

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

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

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

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

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

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

مثال زیر رو در نظر بگیرید: همونطور که میبینید یک تگ p قرار داده شده و مقداری متن در اون قرار گرفته. بعد از اون یک div دیگه قرار دادیم و با استفاده از position: absolute، موقعیت اون رو تغییر دادیم و اون رو بر روی پاراگراف قرار دادیم. در حالت عادی و بصورت پیش فرض مقدار auto برای pointer-events در نظر گرفته میشه. در حالت auto یا پیش فرض، بصورت زیر است:

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

همونطور که مشاهده میکنید، دیگه نمیتونیم متن درون div رو انتخاب کنیم و اصلا مثل اینکه div وجود ندارد و به راحتی میتونیم متن پاراگراف رو از درون اون انتخاب کنیم. به همین راحتی.

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

کد زیر رو در نظر بگیرید:

میبینید که 2 لینک رو قرار دادیم. حالا کدهای CSS زیر رو اضافه میکنیم:

میبینید که اون لینکی که آدرس example.com داره رو انتخاب کردیم و این ویژگی رو برابر با none قرار دادیم. با اینکار خروجی بصورت زیر خواهد شد:

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

نکته ای که در آخر باید بگم اینه که اگر از این ویژگی برای یک المنت استفاده کردید و اون رو برابر با none قرار دادید، میتونین مقدار متفاوتی رو برای فرزندان اون المنت در نظر بگیرید. با اینکار اون المنتهای فرزند یا Child بصورت معمول کار میکنن و رویدادهای ماوس برای اونها کار میکنه.

برای مطالعه بیشتر میتونین لینکهای زیر رو ببینید:

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source