Сделать элемент некасабельным

[romveld]

Всем, привет! Нужно сделать элемент "некасабельным" для пальца на телефоне. То есть, чтобы при взаимодействии с пальцем при касании с элементом ничего не происходило. В CSS есть свойство pointer-events: none. оно работает отлично, но только при клике мышью. Есть свойство touch-action: none. Оно по идее должно работать для касания пальцем также, как pointer-events: none для клика или захвата мышью, но нет, не работает. У меня слайдер, вешаю это свойство - ноль реакции. При этом по примерам вижу, что оно не работает на элементах с overflow: auto;

Вот так работает:

element.addEventListener('transitionrun', () => {
         element.style.pointerEvents = 'none';
});

А так нет:

element.addEventListener('transitionrun', () => {
         element.style.touchAction = 'none';
});

При этом оно не работает даже, если добавлять напрямую через стили.
Может кто знает какие есть ещё варианты для того, чтобы сделать элемент невосприимчевым для касания пальцем. Заранее спасибо!

[Aetae]

Шо? Pointer-events для всего: для любых "поинтеров".

[romveld]

Не работает, когда открываешь инспектор кода в браузере, ставишь мобилу и пробуешь мышью таскать слайдер - блокирует клик, тестируешь на самом телефоне пальцем - не срабатывает слайдер переключается. На мышь работает, на палец нет.

[Aetae]

romveld наскок древний у тя телефон? transitionrun - свежее событие, он может его вообще не уметь. Поставь pointer-events просто в css и проверь.

[voraa]

Есть свойство touch-action: none. Оно по идее должно работать для касания пальцем также, как pointer-events: none для клика или захвата мышью,

Плохая идея.
touch-action: none отменяет стандартные жесты, такие как роллинг, масштабирование и проч. К кликам это не относится.
Попытайтесь ловить события pointerdown и отменять их preventDefault.

Не знаю, какой у вас html код.
Учтите, что pointer-events: не наследуется. Т.е. если событие мыши произойдет на потомке элемента, то оно будет всплывать и дойдет до элемента.

[romveld]

По ходу да, дело в телефоне (2016 года), проверил на новом всё работает. Единственное, пусть телефон старый, браузер то обновлённый, или я чего то не понимаю, где вообще интерпретатор JS находится? Как считывание JS-кода происходит. Просветите, если не сложно.

[Aetae]

romveld, если это айфон - то он анально огорожен, все браузеры вынуждены юзать яблочный говно-движок. Иными словами по уровню поддержки чего-то на айфоне надо смотреть только на версию сафари.

В ином случае смотреть на поддержку мобильными версиями браузеров, они отличаются от декстопных, даже если используют один движ.

Ну и вообще transitionrun по хорошему юзать не стоит, за исключением крайне специфичных случаев, есть шанс что вы что-то делаете не так.

Учтите, что pointer-events: не наследуется. Т.е. если событие мыши произойдет на потомке элемента, то оно будет всплывать и дойдет до элемента.

"Не наследуется" - не правильное описание, т.к. вполне наследуется(распространяе� � свое действие на потомков). Правильнее было бы сказать, что он делает элемент "прозрачным" для событий указателя, как будто его не существует.

[voraa]

"Не наследуется" - не правильное описание,

Ну да. Неудачно выразился.
Смысл в том, что если у родительского элемента стоит
pointer-events: none;
а у дочернего
pointer-events: auto;
то при клике на дочерний элемент все равно будут срабатывать обработчики этого родительского.

[romveld]

Понял, спасибо!