web-dev-qa-db-ja.com

非リンク要素でAndroidの：active css疑似クラスをシミュレートする方法は？

Android webkitのすべての要素で:active疑似クラスの動作を模倣できるようにしたいと思います。現在、:active構文はa要素でのみ機能します（リンク）私が取り組んでいるアプリのほぼすべてのアクション可能な要素は、標準のリンクタグ以外のものです。iOSWebkitは、すべての要素で: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
androidcsswebkit
20
chas s.

@caffeinが言ったことに基づいて、これの完全な実装は次のとおりです。

すべての：activeコードについて、次のような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");
 });
}

これには、iOSで高速のネイティブ：activeクラスを使用し、AndroidでJavaScriptに戻るという利点があります。

http://pervasivecode.blogspot.com/2011/11/Android-phonegap-active-css-pseudo.html の私のブログから取得

編集：それ以来、ボタンが偽のアクティブな状態で「くっつく」ことがあることを発見しました。これに対する修正は、touchcancelイベントも処理することです。例えば。これを上記に追加します。

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

要素のアクティブ状態のクラスを追加および削除するスクリプトを使用したくない場合は、bodyタグに空のtouchstartイベントを追加するだけです。

<body ontouchstart="">

これにより、Androidデバイスがタッチイベントを処理し、疑似クラス：activeがすべての要素で正しく機能するようになります。

15
Nadia

いいえ Ben Claytonのソリューション に基づく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);
    }
  }
}
6
nagoya0

「：active」疑似クラスは、実際に要素をクリックまたは押すとトリガーされます。スマートフォンの回避策は、Javascriptイベントを使用することです： "ontouchstart"＆ "ontouchend"。

ontouchstartを使用してスタイルを変更し、ontouchendを使用して実際にアクションをトリガーしてみてください。

3
monsieur_h

コメントできないので、ここに別の答えを追加します。

Nadzeyaは次の解決策を提案しました：

<body ontouchstart="">

これは説明どおりに機能しますが、意図しない結果が生じる可能性もあると思います。

私たちのサイトでは、ボタンが時々機能しなくなるという問題がありました。実際、ボタンは（押されたかのように）色が変わりますが、クリックイベントは発生しません。フォームの送信ボタンでさえ、押されたように見えた後でも、フォームの送信に失敗します（Javascriptは含まれません）。

今日、私は再び問題を見ました。気まぐれで、私はこの属性を削除し、問題は解決しました。その後、もう一度追加すると、問題が再発しました。

問題を確実に再現できないため、これが原因であるかどうかはわかりませんが、今のところ、タグをオフにして、：active問題を別の方法で解決します。

1
DavidM

これを試して。それはAndroid上で私のために完全に動作します

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

このコードをHTMLに追加してみてください。

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

私は簡単な代替ソリューションを手に入れました。ただし、これには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);
}

phoneギャップチュートリアル でソースを見つけてください

0
Mani