Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2021, 17:13
Интересующийся
Отправить личное сообщение для romveld Посмотреть профиль Найти все сообщения от romveld
 
Регистрация: 20.10.2018
Сообщений: 21

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


При этом оно не работает даже, если добавлять напрямую через стили.
Может кто знает какие есть ещё варианты для того, чтобы сделать элемент невосприимчевым для касания пальцем. Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2021, 17:49
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,970

Шо? Pointer-events для всего: для любых "поинтеров".
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2021, 18:38
Интересующийся
Отправить личное сообщение для romveld Посмотреть профиль Найти все сообщения от romveld
 
Регистрация: 20.10.2018
Сообщений: 21

Не работает, когда открываешь инспектор кода в браузере, ставишь мобилу и пробуешь мышью таскать слайдер - блокирует клик, тестируешь на самом телефоне пальцем - не срабатывает слайдер переключается. На мышь работает, на палец нет.
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2021, 19:55
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,970

romveld наскок древний у тя телефон? transitionrun - свежее событие, он может его вообще не уметь. Поставь pointer-events просто в css и проверь.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2021, 21:48
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,313

Сообщение от romveld
Есть свойство touch-action: none. Оно по идее должно работать для касания пальцем также, как pointer-events: none для клика или захвата мышью,
Плохая идея.
touch-action: none отменяет стандартные жесты, такие как роллинг, масштабирование и проч. К кликам это не относится.
Попытайтесь ловить события pointerdown и отменять их preventDefault.

Не знаю, какой у вас html код.
Учтите, что pointer-events: не наследуется. Т.е. если событие мыши произойдет на потомке элемента, то оно будет всплывать и дойдет до элемента.
Ответить с цитированием
  #6 (permalink)  
Старый 31.07.2021, 22:43
Интересующийся
Отправить личное сообщение для romveld Посмотреть профиль Найти все сообщения от romveld
 
Регистрация: 20.10.2018
Сообщений: 21

По ходу да, дело в телефоне (2016 года), проверил на новом всё работает. Единственное, пусть телефон старый, браузер то обновлённый, или я чего то не понимаю, где вообще интерпретатор JS находится? Как считывание JS-кода происходит. Просветите, если не сложно.
Ответить с цитированием
  #7 (permalink)  
Старый 31.07.2021, 22:58
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,970

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

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

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

Сообщение от voraa Посмотреть сообщение
Учтите, что pointer-events: не наследуется. Т.е. если событие мыши произойдет на потомке элемента, то оно будет всплывать и дойдет до элемента.
"Не наследуется" - не правильное описание, т.к. вполне наследуется(распространяе свое действие на потомков). Правильнее было бы сказать, что он делает элемент "прозрачным" для событий указателя, как будто его не существует.
__________________
29375, 35

Последний раз редактировалось Aetae, 31.07.2021 в 23:05.
Ответить с цитированием
  #8 (permalink)  
Старый 01.08.2021, 08:26
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,313

Сообщение от Aetae
"Не наследуется" - не правильное описание,
Ну да. Неудачно выразился.
Смысл в том, что если у родительского элемента стоит
pointer-events: none;
а у дочернего
pointer-events: auto;
то при клике на дочерний элемент все равно будут срабатывать обработчики этого родительского.
Ответить с цитированием
  #9 (permalink)  
Старый 01.08.2021, 12:45
Интересующийся
Отправить личное сообщение для romveld Посмотреть профиль Найти все сообщения от romveld
 
Регистрация: 20.10.2018
Сообщений: 21

Понял, спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать скрытие открытого элемента при открытии другого showHide candro Общие вопросы Javascript 6 15.10.2014 10:23
JQuery carousel сделать сдвиг на один элемент Heidel jQuery 1 06.10.2014 08:13
Как сделать такую страницу mortido Элементы интерфейса 11 02.10.2014 06:20
Сделать видимым select... Anneta Элементы интерфейса 7 12.01.2011 20:21
Как сделать активный элемент при ховере TicTac Общие вопросы Javascript 25 16.10.2010 21:12