Как имитировать: активный css псевдокласс в android на элементах без ссылки?

Я хотел бы иметь возможность имитировать поведение :active псевдо-класса для всех элементов веб-сайта Android. В настоящее время :active синтаксис работает только a элементами (ссылками). Почти все действующие элементы в приложении, над которым я работаю, – это нечто иное, чем стандартный тег ссылки. IOS webkit поддерживает :active для всех элементов.

 /* works on both android iOS webkit */ a:active { color: blue; } /* works on iOS webkit, does not work on android webkit */ div:active { color: red; } 

Я нашел пару ресурсов [1,2], которые решают подобные проблемы, но они немного тяжелы, и мне интересно, есть ли более легкое весовое решение, которое я просто не могу найти.

  1. http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
  2. http://code.google.com/intl/ro-RO/mobile/articles/fast_buttons.html

Основываясь на том, что сказал @caffein, вот полная реализация этого:

Для всех: активный код, напишите правила CSS, которые выглядят так.

 my-button:active, .my-button.fake-active { background-color: blue; } 

Затем в вашем готовом событии добавить этот код:

 if (navigator.userAgent.toLowerCase().indexOf("android") > -1) { $(".my-button") .bind("touchstart", function () { $(this).addClass("fake-active"); }) .bind("touchend", function() { $(this).removeClass("fake-active"); }); } 

Это имеет преимущество использования быстрого native: active class на iOS и возврата к JavaScript на Android.

Взято из моего блога по адресу http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

EDIT: С тех пор я обнаружил, что кнопки могут иногда «прилипать» в поддельном активном состоянии. Исправить это – также обработать событие touchcancel. Например, добавьте это выше.

 .bind("touchcancel", function() { var $this = $(this); $this.removeClass("fake-active"); }); 

Если вы не хотите использовать какой-либо скрипт, который добавляет и удаляет класс для активного состояния элемента, просто добавьте пустое событие touchstart в тег body:

 <body ontouchstart=""> 

Это позволит устройству Android справиться с событиями касания и псевдокласс : актив будет работать правильно для всех элементов.

Версия No-jQuery, основанная на решении Бена Клейтона .

EDIT: добавлено событие «touchmove».

 function hasClass(ele,cls) { return ele.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)")); } function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; } function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp("(\\s|^)"+cls+"(\\s|$)"); ele.className=ele.className.replace(reg," "); } } window.onload = function() { if (navigator.userAgent.toLowerCase().indexOf("android") > -1) { var elements = document.getElementsByClassName("my-button"); for(var i = 0; i < elements.length; i++) { var elm = elements[i]; elm.addEventListener("touchstart", function() { addClass(this, "fake-active");}, false); elm.addEventListener("touchmove", function() { removeClass(this, "fake-active");}, false); elm.addEventListener("touchend", function() { removeClass(this, "fake-active");}, false); elm.addEventListener("touchcancel", function() { removeClass(this, "fake-active");}, false); } } } 

Псевдокласс «: active» запускается, когда вы нажимаете или нажимаете элемент. Обходным решением для смартфонов является использование событий Javascript: « ontouchstart » и « ontouchend ».

Попробуйте использовать ontouchstart для изменения стиля и ontouchend для фактического запуска действия.

Поскольку я не могу комментировать, я собираюсь добавить еще один ответ.

Наджея предложила следующее решение:

 <body ontouchstart=""> 

Это работает, как описано, но я считаю, что это может также иметь непреднамеренные последствия.

На нашем сайте возникла проблема, когда кнопки иногда переставали работать. Фактически, кнопка будет менять цвета (как если бы она была нажата), но событие click не срабатывало. Даже кнопки отправки в формах не смогут представить форму (без участия Javascript), даже после нажатия.

Сегодня я снова увидел проблему. По прихоти я удалил этот атрибут, и проблема исчезла. Затем я добавил его снова, и проблема вернулась.

Поскольку я не могу достоверно воспроизвести проблему, я не могу быть уверен, что это было причиной, но пока я собираюсь оставить этот тег и решить другую проблему:

попробуй это. Он отлично работает на Android

 .my-button { -webkit-tap-highlight-color: blue; } 

Попробуйте добавить этот код в свой HTML:

 <script> document.body.addEventlistener('touchstart',function(){},false); </script> 

Вам просто нужно поместить этот код в свой документ:

 <script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script> 

Я получил легкое альтернативное решение. Однако это требует от вас перехода от тега div к тегу.

 <a class="html5logo" href="javascript:void(0);" ontouchstart="return true;"></a> .html5logo { display: block; width: 128px; height: 128px; background: url(/img/html5-badge-128.png) no-repeat; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */ } .html5logo:active { -webkit-transform: scale3d(0.9, 0.9, 1); } 

Пожалуйста, найдите источник в учебнике по телефону

Intereting Posts
Как использовать файл apk для пользовательской библиотеки в других приложениях Фильтровать LogCat, чтобы получать только сообщения из Моего приложения на Android? Google плюс клиент «Внутренняя ошибка» Как создать обратные вызовы между кодом Android и собственным кодом? Диалоговое окно разрешения Android M не отображается Как узнать идентификаторы или имена предварительно загруженных системных чертежей (растровые изображения) из дампа памяти Как настроить ориентацию активности в Android на основе устройства? Как указать файл заголовка c в файле android.mk Как исправить файл libgnustl_shared.so, дублированный, который в стороннем sdks? ConnectedAndroidTest, как запускать определенные тесты Состояние экземпляра восстановления android для фрагмента, который находится в задней части Как ограничить выбор флажка в списке? Почему класс BuildConfig использует Boolean.parseBoolean () вместо буквенных значений? Получить координаты событий касания относительно родительского Войдите в Facebook с моего сайта Django через приложение для Android