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

auto

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

  pointer-events:auto;

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

  pointer-events:none;

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>