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

Всем, привет! Нужно сделать элемент "некасабельным" для пальца на телефоне. То есть, чтобы при взаимодействии с пальцем при касании с элементом ничего не происходило. В 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';
});

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

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

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

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

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

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

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

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

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

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

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

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

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