当elem隐藏时，Android webview'：active'保持打开状态

REJH 发表于 Dev

雷杰

我正在为Android开发一个html-app，并且：active css规则存在问题。当我隐藏'：active'的元素时，它的工作方式应该像但应该如此。国家永远不会被解散。

例如：我有一个带有此CSS的按钮：

.button:active { background-color:rgba(0,0,0,0.5); }

和这个JavaScript：

$(".button").on("click",function(evt){ 
    $(evt.originalEvent.target).css("display","none"); 
});

当我点击按钮时，它是隐藏的。但是当我取消隐藏它时，它仍然会应用.button：active css规则。

救命？

雷杰

我想我使用了主要的解决方法（因为touch.target用于touchs返回了用户点击的元素，该元素很可能是绑定事件的实际元素的子节点（请参见下面的示例，它将返回[img ] elem，而不是[div]）。

PS：@Richa的回答确实帮助我解决了问题，而不是希望：active可以解决

HTML（摘要）

<div class='button activatablel'><img src='someicon.png'></div>

的CSS

.activatablel { /* nothing, just used to find the elements with jquery) */ }

.activatablel_active {
    background:#f00;
}

JAVASCRIPT

elems = $(".activatablel");

for (var i in elems) {
    var elem = elems[i];
    elem.ontouchstart = function(evt) {
        // Now we have to find the ACTUAL element that bound this event 
        // because somebody decided it's useful to not do this &$*((@^#))_
        var foundTheActualTarget = false;
        var thetarget = evt.target;
        var whilenum = 0;
        while (!foundTheActualTarget) {
            if (thetarget.className) {
                if (thetarget.className.indexOf("activatablel")>=0) {
                    foundTheActualTarget = true;
                    break;
                }
            }
            thetarget = thetarget.parentNode;
            whilenum++;
            if (whilenum>256) { break; } // TODO: unless we intend to do this job in Reno, we're in Barney
        }
        if ($(thetarget).hasClass("activatablel_active")) { return; }
        $(thetarget).addClass("activatablel_active");
    }
    elem.ontouchend = function(evt) {
        $("*").removeClass("activatablel_active");
    }
    elem.ontouchcancel = elem.ontouchend;
}