ویژگی pointer-events در CSS

pointer-events Property

ویژگی pointer-events در CSS مشخص می کند که چه قسمت هایی از یک عنصر به هنگام کلیک چه عملکردی داشته باشد.

نحوه نوشتار

pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG تنها در */
pointer-events: visibleFill;    /* SVG تنها در */
pointer-events: visibleStroke;  /* SVG تنها در */
pointer-events: visible;        /* SVG تنها در */
pointer-events: painted;        /* SVG تنها در */
pointer-events: fill;           /* SVG تنها در */
pointer-events: stroke;         /* SVG تنها در */
pointer-events: all;            /* SVG تنها در */

نکته: اگر عنصر SVG باشد، مقدار پیشفرض این ویژگی visiblePainted می باشد و اگر عنصر غیر از آن باشد مقدار پیشفرض auto خواهد بود.

مقادیر

auto​

اگر مقداری به این ویژگی در عنصری داده نشود، این مقدار پیشفرض است. همچنین این مقدار معادل visiblePainted در عناصر SVG است.

none​

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

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

 <p>
      در زیر به دو وبسایت لینک داده شده است. لینک به گوکل غیر فعال و لیک به یاهو
      فعال می باشد.
</p>
<a href="http://google.com">Google.com</a><br />
<a href="http://yahoo.com" target="_blank">Yahoo.com</a>

css

a:first-of-type {
    pointer-events: none; 
}
a:last-of-type {
    pointer-events: auto; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی از مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.