Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Планшет и обработка наведения "мышки"

Автор: maxipub 18.5.2015, 17:23

Добрый день! Ребята, если вопрос можно решить на CSS, буду безумно счастлив!  Но подозреваю, что это можно сделать только на JavaScript. Есть ссылка с CSS псевдоклассом :hover (отображает скрытый слой при наведении на нее, как выпадающий пункт меню). Загвоздка в том, что на планшетах и прочих тачскринах нет мышки, так что тут наведение курсора это еще и клик. Нам надо каким-либо методом дать понять, что если страничка открыта с такого устройства, то первый клик надо обрабатывать как наведение курсора, а уже если будет второй клик - его уже считаем за клик. Ну, а для нормальных компов ничего менять не надо, наведение - это наведение, клик - это клик. Повторюсь, если нечто такое возможно на CSS - это будет круто! Заранее огромная благодарность за подсказки.

Автор: ksnk 18.5.2015, 20:34

Что-нибудь такое Код $('body').on('touchstart', 'a', function(e){     if(!$(this).is(':focus')){         $(this).focus();         e.preventDefault();          return false;      } }); Правда трогательного девайса под рукой нету :( Кто проверит?

Автор: baldina 18.5.2015, 21:35

определить по :active то же, что и по :hover типа https://jsfiddle.net/hotLrfdz/ на моем трогательном телефоне работает Добавлено через 1 минуту и 9 секунд правда разницы первый-второй не будет

Автор: ksnk 18.5.2015, 22:19

https://jsfiddle.net/hotLrfdz/6/ Добавил туда ссылки в 4-й пункт. ошибся в своем посте, не :focused, а : focus

Автор: maxipub 19.5.2015, 08:47

Взял для тестов айпад жены. Как же меня все это бесит, все эти планшетники и телефоны...    baldina, не работает вообще ничего. Почему - ума не приложу. Буду ковыряться... ksnk, Вы меня немного не так поняли. Теми ссылками, которые с тачскринов не должны сразу кликаться, являются именно пункты "one", "two", "thee". Ну хоть технической сути это не меняет. В общем, смотрю что :hover срабатывает только в момент нажатия пальцем... Я был убежден что он остается висеть там до касания в следующем месте. В итоге происходит полная лажа. Я раньше не замечал этого, т.к. пункты меню были ссылками, и сразу осуществлялся переход на другую страницу, меню только мелькало... Спасибо за помощь, буду разбираться. Если появятся какие новости, отпишусь.

Автор: ksnk 19.5.2015, 09:01

Цитата(maxipub @  19.5.2015,  08:47 ) ksnk, Вы меня немного не так поняли. Теми ссылками, которые с тачскринов не должны сразу кликаться, являются именно пункты "one", "two", "thee". Ну хоть технической сути это не меняет. Технически - это и не ссылки. Ссылки (тег А) - в четвертом пункте https://jsfiddle.net/hotLrfdz/6/. При первом touch они становятся `focused`, при втором - кликаются. Мне казалось, нужно избежать автоматического клика по прикосновению, разве не так? На андроиде, вроде так.

Автор: maxipub 19.5.2015, 11:14

Цитата(ksnk @  19.5.2015,  09:01 ) Технически - это и не ссылки. В моем случае, "one", "two", "thee" - все это тоже ссылки. Меню раскрывается при наведении курсора. И вот чтоб на планшете раскрыть меню за неимением курсора, по нему надо кликнуть. И получается что меню то открывается, но в то же время срабатывает и клик по ссылке. В этом и проблема. Цитата(ksnk @  19.5.2015,  09:01 ) Мне казалось, нужно избежать автоматического клика по прикосновению, разве не так? По ссылкам "one", "two", "thee". Ссылки из самого выпадающего списка открываются как обычно. Т.е. еще раз, чтобы открыть список - надо навести на него курсор. А в планшетах и прочем для этого получается что надо кликнуть по "one", "two", "thee" - но у меня они являются в то же время и обычными ссылками. На ПК, для которого изначально все и проектировалось, таких проблем по ясным причинам и не возникало. Надеюсь, теперь понятно будет. Моя вина, поспешил, надо было пример сразу прикреплять. Это все можно делать на JavaScript, но не хочу сайт лишний раз грузить, пока что изучаю новые псевдоклассы CSS и просто последние нововведния, может повезет.

Автор: maxipub 19.5.2015, 16:49

Ничего подходящего на CSS найти не удалось. Было принято решение сделать проверку юзерагента на PHP - если он из списка мобильных приложений, отдаем JavaScript версию, для всех остальных нормальных пацанов - человеческую CSS. Не то чтобы я не любил JavaScript, он крут. Но такие вещи должны работать на CSS, ИМХО! Спасибо всем за помощь!

Автор: sQu1rr 19.5.2015, 16:55

Цитата(maxipub @  19.5.2015,  14:49 ) Не то чтобы я не любил JavaScript, он крут. Но такие вещи должны работать на CSS, ИМХО! Да нет, вы ошибаетесь. ЦСС - дизайн, анимация, все что угодно кроме "поведения". И не был он для этого придуман. То что вам не хватает какой-то функциональности, ну так извините, невозможно сделать средство от всего. Цитата(maxipub @  19.5.2015,  14:49 ) для всех остальных нормальных пацанов - человеческую CSS Привыкайте, скоро большинство устройств будут тачскрин Цитата(maxipub @  19.5.2015,  14:49 ) если он из списка мобильных приложений Бывают лаптопы с тачскрином. Даже дисплеи с тачскрином сейчас есть. А на телефон можно установить линукс и подключить мышку. По моему более правильно будет разработать решение, которое одинаково работает на тачскрине и без него

Автор: maxipub 19.5.2015, 20:04

sQu1rr, ну, это ваше мнение. Давайте еще ссылки при наведении курсора и активные элементы форм на JS подсвечивать будем. Это разве не "поведение"?

Автор: sQu1rr 20.5.2015, 11:25

Цитата(maxipub @  19.5.2015,  18:04 ) Это разве не "поведение" Ну в таком случае анимация тоже "поведение" - там же что-то двигается. Что я имел ввиду так то что css - это, грубо говоря, список аксиом - как что выглядит если элемент имеет определенные атрибуты. Когда кто-то наводит на элемент - его селектор меняется, и применяется другой стиль. То что вы пытаетесь сделать - не относится к "правилам" описанным в цсс, вы хотите, что бы первое нажатие производило одно *действие* а второе - другое.

Автор: baldina 20.5.2015, 15:11

поддержу sQu1rr меню на css это непредвиденное использование (типа метапрограммирования в c++) хотя оно и имеет приятные свойства, но все же нарушает цели css и не способствует структурному подходу код такого меню настолько же понятен, насколько понятны метапрограммы на шаблонах С++

Автор: sQu1rr 20.5.2015, 15:53

Цитата(baldina @  20.5.2015,  13:11 ) код такого меню настолько же понятен, насколько понятны метапрограммы на шаблонах С++  оффтоп, вспомнилось просто Код assert( top( o-------o              |L       \              | L       \              |  o-------o              |  !       !              !  !       !              o  |       !               L |       !                L|       !                 o-------o ) == ( o-------o                                  |       !                                  !       !                                  o-------o ) );

Автор: maxipub 22.5.2015, 10:08

Цитата(sQu1rr @  20.5.2015,  11:25 ) Ну в таком случае анимация тоже "поведение" - там же что-то двигается. Насколько я понимаю, синонимом "поведения" будет "реакция". Анимация ни на что не реагирует, она живет своей собственной жизнью. Цитата(baldina @  20.5.2015,  15:11 ) меню на css это непредвиденное использование (типа метапрограммирования в c++) Тема на самом деле очень холиварная. Если говорить об исходном CSS - возможно. Современный CSS3, грядущий CSS4 - ИМХО, это уже совсем другие вещи под тем же названием. Это как PHP раньше назывался Personal Home Page.   Вот что пишет https://ru.wikipedia.org/wiki/CSS: Цитата Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Думаю, с этим ни кто не станет спорить. Это относится даже к самой первой версии CSS. Меняем стиль, и наше выпадающее меню превращается в развернутое. Разве речь идет не о внешнем виде? Я понимаю что тут грань внешний вид / поведения весьма тонкая. Но опять же, подсветка ссылок, активных элементов форм, та же смена курсора - ни кто не скажет что это не CSS, но разве это не можно назвать поведением? Мы не затрагиваем данные, мы работаем только с внешним видом. Или, например строки в таблицах. Не важно, отображается таблица таблицей или на слоях. Подсветить строку, над которой находится курсор - это здравая мысль. И это поведение. Вы сделаете это на JavaScript?

Автор: sQu1rr 22.5.2015, 11:46

Вы, на мой взгляд, смотрите на это не с правильно стороны. Ваше объяснение: Я навожу курсор на ссылку, цсс ее посвечивает. Вывод: цсс - поведение. Мое объяснение: Я новожу курсор на ссылку, браузер меняет аттрибуты ссылки (добовляет :hover псевдокласс), применяется новое правило цсс. При этом цсс служит просто сводкой правил: как что выглядит при определенных аттрибутах. Сам же цсс эти аттрибуты не меняет, и не только не знает как менять - знать не должен. Тут можно вспомнить, что ЦСС позволяет вставлять определенный контент, до или после селектора ::before ::after, но опять же - это безусловное правило, основанное на селекторе. Аттрибут тага меняется, и правило больше не действует. Цитата(maxipub @  22.5.2015,  08:08 ) Мы не затрагиваем данные Как, скажите мне, не затрагивая данных, сохранить, что первый клик был именно первым а не 21м. Как минимум нужно хранить белуво значение где-то и его менять.

Автор: baldina 22.5.2015, 12:36

Цитата(maxipub @  22.5.2015,  10:08 ) Подсветить строку, над которой находится курсор - это здравая мысль. И это поведение. Да. Но это поведение, не выходящее за рамки этой строки (и этого html элемента). Так же, как и работа, например, чекбокса.

Автор: ksnk 22.5.2015, 13:04

Если уж тут перешли на теорию, то вы все смотрите на это дело с неправильой стороны. Руки-крылья.... главное - хвост   Правильная сторона: Для разработчиков css ставится задача - разработать такой язык, который позволял бы менять внешний вид сайта, изменяя тексты только на одном этом языке. Частично, css под эту задачу вполне заточен, если вспомнить адаптивные навороты, анимацию в css, и насаждаемые строгие правила html-верстки. Просто в реальной жизни, шаблон сайта включает в себя еще и поведение элементов. А вот оно уже пишется на JS. Так что если ванговать пути развития css, то скоро в эфире появятся JS вставки, или JS инклюды или еще какой способ css-воздействия на JavaScript-окружение сайта. Кто-нибудь еще помнит микрософтовские идеи по внедрению скриптов в стили? Вот то же, только хитрее и от гугла

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)