Pointer-events

در این پست میخواهم در مورد یکی از ویژگی های CSS به نام pointer-events صحبت کنم.از این ویژگی برای تعیین اینکه آیا یک عنصر می تواند هدف رویدادهای اشاره گر باشد یا خیر استفاده می شود.به بیان ساده تر ، می توانید ارتباط ماوس با عناصر برقرار نکنید.

در اینجا چند مثال میزنم.اولین مثال غیرفعال کردن لینک است.

در حالت عادی با زدن دکمه صفحه گوگل برای ما باز میشود حال استایل زیر را به دکمه میدهیم.

اگر دقت کنید با قرار گرفتن بر روی لینک حتی علامت ماوس هم تغییر نمیکند و به صورت فلش باقی می ماند.

و اگر در سمت جاوا اسکریپ برای رویداد کلیک متدی را اضافه کرده باشیم هم آن متد عمل نمیکند

با کلیک کردن بر روی لینک میبینیم که هیچ پیغامی نمایش داده نمیشود.

اگر استایلی که اضافه کردیم را حذف کنیم، میبینیم که لینک به صورت صحیح کار میکند .

میبینیم که هم پیغام نمایش داده میشود و هم صفحه گوگل انتقال میابیم. و نیز علامت ماوس هم به شکل دست تغییر یافت.

مثال بعدی در مورد رفتار فرزند و پدر در قبال این ویژگی می باشد.

دو div تو در تو به شکل زیر میسازیم:

و استایل های زیر را نیز به آنها میدهیم:

تا ظاهر فرم به شکل زیر گردد:

حال به div بیرونی استایل pointer-events: none; را اعمال کنیم، و بر روی div درونی کلیک کنیم.

هدف ما بررسی این سوال است که آیا EventListener های جاوا اسکریپ برای div درونی کار میکند یا خیر؟

با کلیک کردن بر روی div درونی میبینیم که رویداد تعریف شده کار نمیکند.

دلیل این رفتار این است که div درونی ویژگی pointer-events را از پدر خود به ارث برده است.

برای رفع این مشکل باید این استایل pointer-events: auto; را بهdiv درونی اعمال نماییم.

برای دریافت اطلاعات درمورد سایر مقادیر این ویژگی بر روی لینک زیر کلیک کنید.