События мыши pointer-events
Добавлено: Ср июл 03, 2024 11:34 am
Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану.
Согласно википедии: указатель (англ. pointer) — переменная, диапазон значений которой состоит из адресов ячеек памяти или специального значения — нулевого адреса, как итог последнее используется для указания того, что в данный момент указатель не ссылается ни на одну из допустимых ячеек. Но мне более интересно использования в примере, ведь хотелось бы перекрыть часть содержимого контейнера при этом остальную часть оставить видимой, это стает возможным только при применении псевдоэлемента ::before, который полность наследует от родительского элемента, - размеры, свойства и т.д, которые мы и хотим переопределить, просто оставив содержимое контейнера пустым, наследуем, и изменив лишь те самые позиции background и их левое-правое-верхнее-нижнее положение. А эфекты работы pointer-events сдесь и не срабативают четко, можно говорить что элемент просто уязвим к хак-атакам DOM, потому как переобределить содержимое контейнера в другой <tag>, он(pointer-events), внезапно перестает работать, хотя это было явно и до этого..тоесть если мы хотим избавится от событий мыши на нашем элементе, события нужно применять непосредствено на элемент, ведь как оказалось оно ненаследуемо!!
пример выше не срабативает point-events: none;
но когда применить непосредственно на элемент:
все прекрасно работает!!
Согласно википедии: указатель (англ. pointer) — переменная, диапазон значений которой состоит из адресов ячеек памяти или специального значения — нулевого адреса, как итог последнее используется для указания того, что в данный момент указатель не ссылается ни на одну из допустимых ячеек. Но мне более интересно использования
Код: Выделить всё
background: linear-gradient(to bottom, transparent, #50a2de 90%);Код: Выделить всё
<div class="panel" style="point-events: none">
<::before>
<a href="https://learn.javascript.ru/pointer-events">
В соответствии с законом больших чисел, дифференциальное
исчисление непосредственно отображает положительный полином.
Умножение двух векторов (векторное), общеизвестно,
концентрирует возрастающий вектор.</a>
</div>
но когда применить непосредственно на элемент:
Код: Выделить всё
<div class="panel" style="point-events: none">
<::before>
<a href="https://learn.javascript.ru/pointer-events" style="point-events: none">
В соответствии с законом больших чисел, дифференциальное
исчисление непосредственно отображает положительный полином.
Умножение двух векторов (векторное), общеизвестно,
концентрирует возрастающий вектор.</a>
</div>