Android Webview 如何删除加载元素的聚焦/悬停 state？

Question

I have an Android app using webview to load and display html pages.我有一个 Android 应用程序，它使用 webview 来加载和显示 html 页。 But when a new page has just been loaded into the webview, there is sometimes a element which is already hovered.但是当webview刚加载一个新的页面时，有时会有一个元素已经悬停了。 For example the element with id "imhovered" is already hovered and has the blue background of the div (see code below).例如，id 为“imhovered”的元素已经悬停并且具有 div 的蓝色背景（请参见下面的代码）。 This happens quite randomly depending on the element structure of the current page and the position of the touch from the user in the previous page.根据当前页面的元素结构和上一页用户触摸的 position，这种情况非常随机地发生。

html code: html 代码：

<body>
<a href="link1" class="menu">
    <div  class="qlink">here is div1</div>
</a>
<a href="link2" class="menu">
    <div  class="qlink"> here is div2 </div>
</a>
<a  id="imhovered" href="link3" class="menu">
    <div class="qlink">here is div3</div>
</a>            
</body>

and the styles:和 styles：

.menu {
    color: red;
    text-decoration:none;
    font-family:sans-serif;
    font-size: 28px;
}
.menu:hover {
    color: red;
    background-color: green;
}

.qlink {
    padding-left: 84px;
    padding-top: 24px;
    padding-bottom: 20px;
    background: url(aaa.png) no-repeat scroll 28px 0px;
}
.qlink:hover {
    background-color:blue;
}

My question is how to remove this wrong hovered state of the element?我的问题是如何去掉这个错误的悬停在 state 的元素？ I have tried to find a solution for a while with researching and own experimenting but still have no success.一段时间以来，我一直试图通过研究和自己的实验找到解决方案，但仍然没有成功。 Following are what i find out during my experiments:以下是我在实验中发现的：

webview.clearFocus() -> not work webview.clearFocus() -> 无效

javascript/jquery when dom is ready: dom 准备就绪时的 javascript/jquery：

$(document).ready(function () {
    alert($("*:hover").attr("id"));--> result:undefined
    alert($("*:active").attr("id")); --> result:undefined
    alert($("*:focus").attr("id")); --> result:undefined
});

this means that when the dom is ready, there is no focused or hovered element.这意味着当 dom 准备就绪时，没有焦点或悬停元素。

javascript/jquery in body onload (when page is loaded):正文加载中的 javascript/jquery（加载页面时）：

alert($("*:hover").attr("id")); --> result:imhovered
alert($("*:active").attr("id")); --> result:undefined
alert($("*:focus").attr("id")); --> result:undefined

this means that the hovered state has just appeared now as the page has just been loaded.这意味着悬停的 state 现在刚刚出现，因为页面刚刚加载。 Is it now too late to do any style modification because the wrong hovered background is already displayed?因为已经显示了错误的悬停背景，现在进行任何样式修改是否为时已晚？ Is it a bug of webkit/android?是webkit/android的bug吗？ I hope you guys can give me any advice to solve this.我希望你们能给我任何建议来解决这个问题。 Thanks in advance!提前致谢！

Answer 1

i finally find out that when the loading process is quick enough, user will not see the style modification, so i do the following style modification and it solves my problem:我终于发现当加载过程足够快时，用户将看不到样式修改，所以我做了以下样式修改并解决了我的问题：

window.onload = 
    function() {
        var imhovered = $("*:hover");
        var children = imhovered.children();
        children.removeClass("qlink").addClass("qlinkNoHover");
        imhovered.bind('touchstart touchend', function() {
        $(this).children().toggleClass('qlinkFixHovered');
    });
}

.qlinkNoHover {
    background-color:transparent;
    padding-left: 84px;
    padding-top: 24px;
    padding-bottom: 20px;
    background: url(aaa.png) no-repeat scroll 28px 0px;
}

.qlinkFixHovered {
    background-color:blue !important;
}

i hope this could help someone who has the same problem.我希望这可以帮助有同样问题的人。

Android Webview 如何删除加载元素的聚焦/悬停 state？

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-04-17 09:56:48

Android Webview 如何删除加载元素的聚焦/悬停 state？

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-04-17 09:56:48

解决方案1
1 已采纳 2012-04-17 09:56:48