1

在 Android 浏览器上，当我单击处理程序替换（部分）页面内容的元素时，即使我释放了单击，位于我单击的确切位置下方的任何新元素都被认为处于悬停状态。

请注意，仅涉及hoverCSS 状态，focus或者active不显示此行为。

这是一些重现我的问题的最小示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript">
    function toButton() {
      document.getElementById("body").innerHTML =
                            '<input type="button" onclick="toLink()" value="Click me!">';
    }
    function toLink() {
      document.getElementById("body").innerHTML =
                            '<a href="javascript:toButton()">Click me!</a>';
    }
  </script>
  <style type="text/css">
    body * { font-size: 400%; }
    input { color: black; }
    input:hover { color: red; }
    a { color: blue; }
    a:hover { color: red; }
  </style>
</head>
<body id="body">
  <script type="text/javascript">toButton();</script>
</body></html>

以及一些截图，以使其更易于理解：

例子

这2. Hovering是完全正常的，但正如您所看到3. After click的，认为链接仍在悬停，而实际上它不是并且应该显示为4. Expected.

请注意，如果按钮的文本变宽（例如Click on my very left side to trigger the problem），单击Click on会触发问题，而单击very left side to trigger the problem不会。

有没有办法强制浏览器重新计算悬停状态，或者取消它？如果可能的话，它不应该修改特定元素（即在我的示例中的链接），而是在全局级别上执行操作，以便页面的每个元素都免受该错误的影响（我有很多元素受到影响，并添加了处理程序对每个人来说都是一个真正的痛苦，所以我真的需要一个页面范围的解决方案）。

尽管我的示例没有使用它来隔离问题，但我实际上使用了 jQuery，因此欢迎使用它的解决方案。

如果这很重要，我正在三星 Galaxy Note 10.1 / Android 4.1 上进行测试。

4

0 回答 0