Как имитировать: активный 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

Основываясь на том, что сказал @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");
 });

Ответ 2

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

<body ontouchstart="">

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

Ответ 3

версия No-jQuery на основе решения Ben Clayton.

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);
    }
  }
}

Ответ 4

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

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

Ответ 5

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

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

<body ontouchstart="">

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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