卡片開發使用僞類之踩坑記錄

現象描述：

開發卡片，對某個組件使用僞類，生成點擊變色效果，可是鬆開手指後產生的變色效果回不去了。

例如原背景色效果：

添加僞類後點擊效果：

正常狀況手機點擊時產生變色效果，手指鬆開後變爲原來的顏色，實際狀況是手指鬆開後並無恢復原來的顏色。

此問題是快應用引擎在支持卡片僞類不全致使的，可是方法總比問題多，稍微修改一下代碼就可解決。

解決方案：

在使用僞類的組件上加個點擊事件便可，點擊事件中不需作任何邏輯處理示例。

代碼以下：

<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
 </div>

css樣式：

.sitetype_box {
        flex-direction: column;
        background-color:#FFBF00;
        padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
 
     /**僞類 */
    .sitetype_box :active{
        background-color: #E40078;
    }

方法：

test(){
         console.log("message");
      }

欲瞭解更多詳情，請參閱：

快應用卡片開發指導：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-develop-card

快應用僞類：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607

---

原文連接：https://developer.huawei.com/consumer/cn/forum/topic/0201404996846120238?fid=18

原做者：Mayism