Zum simulieren von :active css-pseudo-Klasse in android, die auf nicht-link-Elementen?

Ich würde gerne in der Lage, zu imitieren das Verhalten der :active pseudo-Klasse auf alle Elemente in Android webkit. Derzeit ist die :active syntax funktioniert nur auf a Elemente (links). Fast alle die verwertbaren Elemente, die in die app an der ich arbeite, sind etwas anderes als ein standard-link-tag. iOS webkit unterstützt :active auf alle Elemente.

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

Ich habe ein paar von Ressourcen [1,2], die zu lösen ähnliche Probleme, aber Sie sind beide ein bisschen schwer, und ich Frage mich, ob es eine leichtere Lösung, ich bin einfach nicht in der Lage zu finden.

InformationsquelleAutor chas s. | 2011-02-09

21

Basierend auf dem, was @caffein sagte, hier ist eine vollständige Umsetzung dieser:

Für alle :active code, schreiben Sie CSS-Regeln, die wie folgt Aussehen.
```
my-button:active, .my-button.fake-active {
 background-color: blue;
}
```
Dann in Ihr Dokument ein ready-Ereignis fügen Sie diesen code:
```
if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
 $(".my-button")
 .bind("touchstart", function () {
     $(this).addClass("fake-active");
 })
 .bind("touchend", function() {
     $(this).removeClass("fake-active");
 });
}
```
Dies hat den Vorteil, über eine schnelle native :aktiven-Klasse auf iOS, und fallen zurück zu JavaScript auf Android.

Übernommen aus meinem blog bei http://pervasivecode.blogspot.com/2011/11/android-phonegap-active-css-pseudo.html

EDIT: hab ich da entdeckt, dass die Tasten können gelegentlich 'stick' in der fake-aktiven Zustand. Die Lösung für dieses Problem ist auch mit der event touchcancel. E. g. fügen Sie diese an die oben..
```
.bind("touchcancel",
 function() {
  var $this = $(this);
  $this.removeClass("fake-active");
 });
```
- Es nutzt jQuery. Eine Antwort ohne jegliche externe Bibliothek wäre schon einfacher.
- wahrscheinlich hätte es nicht "einfacher". haben Sie gesehen, die native JS-DOM-api? auch, Sie wäre ruiniert mit cross-browser-Unterstützung. der ganze Sinn von jquery ist, um "simplierfy"
- ja aber mit jQuery auf mobilen, ist eine schlechte Idee
- Die ganze Sache ist ein bisschen komisch, :active verhält sich wie :hover auf touch-Geräte <Android 4.4 mit 4.4 funktioniert es nicht mehr richtig und die meiste Zeit hält nur die aktiven Zustand, bis Sie sich berühren Sie das element wieder.Frage mich, ob das derzeitige Verhalten ein bug ist oder ob es ein Fehler war, vor.
- Ja, ich bin leiden unter der "stuck in active state" - Problem auf Android-jetzt - super nervig. Warum in aller Welt hast Android nicht aktivieren :aktives Verhalten?!
InformationsquelleAutor Ben Clayton
15

Wenn Sie nicht möchten, zu verwenden, jedes script, das fügt und entfernt die Klasse für den aktiven Zustand eines Elements, fügen Sie einfach leeren touchstart - Ereignis an das body-tag:
```
<body ontouchstart="">
```
Dieser wird Ihnen sagen, das android-Gerät zu handhaben touch-events und pseudo-Klasse :active wird korrekt auf alle Elemente.
- Wow, das fest mein Problem mit iOS nicht ausgelöst aktiven Zustand! Danke!!!
- Dies funktionierte gut für css :active eigentlich korrekt funktionieren. Wenn Ihr mit Jsoup dies kann leicht Hinzugefügt werden, wie: das endgültige Dokument html = Jsoup.parseBodyFragment(Inhalt); html.Körper().attr("ontouchstart","");
- Funktioniert nicht bei android 2.1.
InformationsquelleAutor Nadia

No-jQuery-version, basierend auf Ben Clayton ' s Lösung.

EDIT: Hinzugefügt, "touchmove" event.

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

Ich bin mit diesem jetzt. Beachten Sie, dass dieses.hasClass werden müssen, ele.hasClass. Noch, die hasClass/addClass/removeClass code hat bei mir nicht funktioniert. Stattdessen habe ich verwendet: developer.mozilla.org/en-US/docs/Web/API/element.classList

InformationsquelleAutor nagoya0

3

Der ":active " - pseudo-Klasse wird ausgelöst, wenn Sie tatsächlich klicken Sie auf oder drücken Sie auf ein element.
Ein workaround für smartphones ist die Nutzung des Javascript-Ereignisse: "ontouchstart" & "ontouchend".

Versuchen Sie es mit ontouchstart so ändern Sie den Stil und ontouchend eigentlich die Aktion auslösen.

InformationsquelleAutor monsieur_h
1

Da kann ich nicht kommentieren, ich werde eine weitere Antwort hier.

Nadzeya vorgeschlagen, die folgende Lösung:
```
<body ontouchstart="">
```
Dieser funktioniert wie beschrieben, aber ich glaube, es kann auch eine unbeabsichtigte Folge.

Es wurde ein problem auf unserer Seite, wo die Tasten gelegentlich aufhören zu arbeiten. In der Tat, die Schaltfläche Farben ändern (als wenn es gedrückt wurde), aber das click-Ereignis würde nicht das Feuer. Auch submit-buttons in Formularen scheitern würden, das Formular zu senden (kein Javascript eingebunden), auch nach erscheinen gedrückt.

Heute sah ich wieder das problem. Aus einer Laune heraus, habe ich entfernt, dieses Attribut und das problem ging Weg. Ich habe dann Hinzugefügt, es wieder und das problem kam zurück.

Da kann ich das problem nicht reproduzieren zuverlässig, ich kann nicht sicher sein, dass dies die Ursache ist, aber für jetzt ich werde den tag aus und lösen Sie den :active Problems einen anderen Weg.

InformationsquelleAutor DavidM
0

versuchen. Es funktioniert bei mir einwandfrei auf Android
```
.my-button {
     -webkit-tap-highlight-color: blue;
}
```
InformationsquelleAutor MaXo

Versuchen fügen Sie diesen code in Ihre HTML:

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

InformationsquelleAutor RyanBay

Ich habe eine einfache Alternative Lösung. Dies aber erfordert, Sie zu ändern, das div-tag ein tag aus.

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

Finden Sie die Quelle an Telefon gap-tutorial

InformationsquelleAutor Mani

-1

brauchen Sie nur diesen code in Ihr Dokument:
```
<script type="application/x-javascript">document.addEventListener('touchmove', function(e){e.preventDefault();}, false);</script>
```
- Dies wird deaktivieren Sie scrollen, das ist nicht das, was der OP wollte.
InformationsquelleAutor Jack.Chan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.