close
چت روم
آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 55) : کار با ویژگی pointer-events
loading...
سرویس سایت سایت رزبلاگ بزرگترین سرویس ارائه خدمات سایت نویسی حرفه ای در ایران

ایرانی

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

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

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

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

css3 attributes

مقدمات مربوط به 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 دیگه اجرا نمیشن

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

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

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

بازدید : 18 تاریخ : پنجشنبه 27 مهر 1396 زمان : 19:9 نویسنده : نوحیان نظرات ()
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی
تبلیغات
Rozblog.com رز بلاگ - متفاوت ترين سرويس سایت ساز

آمار سایت
  • کل مطالب : 436
  • کل نظرات : 8
  • افراد آنلاین : 3
  • تعداد اعضا : 11
  • آی پی امروز : 27
  • آی پی دیروز : 29
  • بازدید امروز : 695
  • باردید دیروز : 1,360
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 4,065
  • بازدید ماه : 8,801
  • بازدید سال : 14,124
  • بازدید کلی : 96,420
  • مطالب
    کدهای اختصاصی