如何模擬：android中的非鏈接元素中的活動css僞類？

我希望能夠模仿Android Webkit中所有元素上的:active僞類的行爲。目前，:active語法僅適用於a元素（鏈接）。幾乎所有我正在處理的應用程序中的可操作元素都不是標準鏈接標記。 iOS webkit支持所有元素上的:active。如何模擬：android中的非鏈接元素中的活動css僞類？

/* 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]是解決類似的問題，但他們都有點沉重，我想知道是否有一種重量更輕的解決方案，我只是無法找到。

來源

2011-02-09 chas s.

的「：激活」實際上當你點擊或按元素僞類被觸發。智能手機的解決方法是使用Javascript事件：「ontouchstart」&「ontouchend」。

嘗試使用ontouchstart修改風格和ontouchend實際觸發動作。

來源

2011-03-01 16:58:11

基於什麼@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"); 
}); 
}

這與使用原生速度快的優勢：iOS上的活動類，並在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"); 
});

來源

2011-11-16 12:33:58

它使用jQuery的來源。沒有任何外部庫的反應會更簡單。 – 2012-04-05 10:23:05

@caffein，它可能不會「簡單」。你見過本地的JS DOM api嗎？另外，你會被跨瀏覽器支持破壞。整個jquery的重點是「簡單」 – MikeMurko 2012-09-19 13:53:01

是的，但在手機上使用jQuery是一個壞主意 – 2013-06-21 12:51:02

No-jQuery版本基於Ben Clayton's solution。

編輯：添加「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); 
    } 
    } 
}

來源

2012-04-07 22:01:27 nagoya0

如果你不希望使用任何腳本，增加和元素的激活狀態消除類，只是空touchstart事件添加到身體標記：

<body ontouchstart="">

這會告訴android設備處理觸摸事件，僞類：活動將在所有元素上正常工作。

來源

2012-11-26 10:04:17 Nadia

試試這個。這對我的作品完美地在Android

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

來源

2013-05-08 08:50:11 MaXo

嘗試將此代碼添加到您的HTML：

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

來源

2013-09-06 09:51:50 RyanBay

既然我無法評論，我要在這裏添加另一個答案。

Nadzeya提出以下解決方案：

<body ontouchstart="">

這樣確實如所描述的，但我相信它也可能有意想不到的後果。

在我們的網站上，按鈕偶爾會停止工作。事實上，按鈕會改變顏色（就像它被按下），但點擊事件不會觸發。即使提交表單上的按鈕，也無法提交表單（不涉及Javascript），即使顯示按下後也是如此。

今天我又看到了這個問題。一時興起，我刪除了這個屬性，問題就消失了。然後我再次添加它，問題又回來了。

因爲我無法可靠地重現問題，所以我不能確定這是什麼原因，但現在我要離開標籤並以另一種方式解決：活動問題。

來源

2014-03-14 21:19:19 DavidM

你只需把這個代碼的文件中：

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

來源

2014-03-24 08:53:21

我有一個簡單的替代解決方案。然而，這要求您將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 gap tutorial

來源

2016-03-28 14:30:27 Mani

如何模擬：android中的非鏈接元素中的活動css僞類？

回答

相關問題