Ostatnio edytowany:

pointer-events

Autor: Virtual Patriot

Opis 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)

Dodatkowe techniczne informacje o właściwości pointer-events

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • tak
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

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 .

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

auto

Opis

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

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="http://webkod.pl">webkod.pl</a>

  </body>
</html>

none

Opis

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

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="http://webkod.pl">webkod.pl</a>

  </body>
</html>