Как смоделировать: активный псевдо-класс CSS в Android на не связанных элементах? - PullRequest
Новая
       20

Как смоделировать: активный псевдо-класс CSS в Android на не связанных элементах?

20 голосов
/ 09 февраля 2011

Я хотел бы иметь возможность имитировать поведение псевдокласса :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

Ответы [ 9 ]

21 голосов
/ 16 ноября 2011

Исходя из того, что сказал @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");
 });
}

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

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

РЕДАКТИРОВАТЬ: С тех пор я обнаружил, что кнопки могут иногда "застрять" в состоянии фальшивой активности.Исправление для этого должно также обработать событие touchcancel.Например, добавьте это к вышесказанному .. 

.bind("touchcancel",
 function() {
  var $this = $(this);
  $this.removeClass("fake-active");
 });
15 голосов
/ 26 ноября 2012

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

<body ontouchstart="">

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

6 голосов
/ 08 апреля 2012

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

РЕДАКТИРОВАТЬ: добавлено событие "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);
    }
  }
}
3 голосов
/ 01 марта 2011

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

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

1 голос
/ 15 марта 2014

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

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

<body ontouchstart="">

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

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

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

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

0 голосов
/ 28 марта 2016

У меня есть простое альтернативное решение.Однако для этого требуется, чтобы вы перешли с тега 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);
}

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

0 голосов
/ 24 марта 2014

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

<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>
0 голосов
/ 06 сентября 2013

Попытка добавить этот код в ваш HTML: 

<script>
document.body.addEventlistener('touchstart',function(){},false);
</script>
0 голосов
/ 08 мая 2013

попробуйте это. У меня прекрасно работает на Android 

.my-button {
     -webkit-tap-highlight-color: blue;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...