CSS властивості
ГлавнаяВластивості CSSАтрибут pointer-events в CSS

Атрибут pointer-events в CSS

667

Властивість pointer-events дозволяє керувати тим, як елементи будуть реагувати на події миші або дотику до сенсорного екрану. Часто застосовується для того, щоб у складній компоновці можна було взаємодіяти з елементами нижче, ігноруючи вищележачі.

Коротка інформація

>
Значення за замовчуванням auto
Успадковується Так
Застосовується До всіх елементів
Анімується Ні

Синтаксис

<code>pointer-events: auto | none

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

auto
Відновлює функціональність елемента за замовчуванням.
none
Запобігає події миші та клацання по елементу.

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pointer-events</title> <style> .panel { background: #50a2de; /* Колір тла */
color: #fff; /* Колір тексту */
padding: 1em; /* Поля навколо тексту */
width: 16em; /* Ширина */
height: 7em; /* Висота */
border-radius: 10px; /* Радіус куточків */
position: relative; /* Відносне позиціонування */
display: inline-block; /* Маємо блоки поруч */
margin-right: 2em; /* Відступ праворуч */
overflow: hidden; /* Приховуємо все, що виходить за межі блоку */
} 
.panel::before { content: ''; /* Виводимо порожній блок */
position: absolute; /* Абсолютне позиціонування */
left: 10px; right: 10px; /* Встановлює ширину блоку */
bottom: 0; /* Положення від нижнього краю */
height: 4em; /* Висота */
background: linear-gradient(to bottom, transparent, #50a2de 90%); pointer-events: none; /* Не реагує на мишу */
}
</style>
</head>
<body> <div class="panel"> Відповідно до закону великих чисел, диференціальне обчислення безпосередньо відображає позитивний поліном. Розмноження двох векторів (векторне), загальновідомо, концентрує зростаючий вектор.
</div> <div class="panel"> Абсолютна похибка послідовно виправдовує лист Мебіуса, що, безсумнівно, приведе нас до істини. Якщо припустити, що &lt; b, багаточлен послідовно трансформує нормальний ортогональний визначник.
</div>
</body>
</html>

У цьому прикладі до кожного блоку знизу додається псевдоелемент з градієнтом, що плавно приховує частину тексту. При цьому неможливо виділити частину тексту, оскільки псевдоелемент частково перекриває його. Щоб цей псевдоелемент не заважав роботі з текстом, до нього додаємо властивість pointer-events зі значенням none.

Специфікація

Специфікація Статус
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation ( Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

11 12 4 15 4 3.6
2.1 3.6 36 3.2

Браузери

В таблиці браузерів застосовуються такі позначення.

  •  — властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі припустимі акції діють або властивість застосовується не до всіх елементів, які вказані в специфікації.="views-similar-block" class="block">

    Див. також