Autor publikacji
Virtual Patriot - Administrator

pointer-events

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości pointer-events

Za pomocą właściwości pointer-events możemy określić na jakie zdarzenia, które możemy wywołać za pomocą kursora myszy powinien reagować interesujący nas element HTML.

Mowa tu między innymi o takich zdarzeniach jak:

  • kliknięcie kursorem myszy na obszar elementu HTML
  • najechanie kursorem myszy na obszar elementu HTML
  • dotknięcie obszaru elementu HTML na ekranie dotykowym (niekoniecznie za pomocą kursora myszy)
Informacje dodatkowe

brak

Informacje techniczne o właściwości pointer-events

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości pointer-events

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 11

Edge

tak

Zobacz więcej informacji o interpretacji właściwości pointer-events.

Opis wartości właściwości pointer-events

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości pointer-events.

Domyślnie element HTML reaguje na wszystkie zdarzenia, które możemy wywołać za pomocą kursora myszy.

Przykład

  pointer-events:auto;
webkod.pl

Przykładowy element "a" reaguje na wszystkie zdarzenia, które możemy wywołać za pomocą kursora myszy.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      a {
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <a href="https://webkod.pl">webkod.pl</a>

  </body>
</html>

none

Wyjaśnienie

Za pomocą wartości none właściwości pointer-events możemy sprawić, że interesujący nas element HTML nie będzie reagował na żadne zdarzenia, które możemy wywołać za pomocą kursora myszy.

Przykład

  pointer-events:none;
webkod.pl

Przykładowy element "a" nie reaguje na żadne zdarzenia, które możemy wywołać za pomocą kursora myszy, ponieważ do wspomnianego elementu "a" została dodana właściwość "pointer-events" wraz z wartością "none".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      a {
        pointer-events:none;
        font-size:1.3em;
      }
    </style>
  </head>

  <body>

    <a href="https://webkod.pl">webkod.pl</a>

  </body>
</html>