Question

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

请注意，只有hover CSS状态，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>

还有一些屏幕截图让人们更容易理解：

Example

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则不会。

有没有办法强制浏览器重新计算悬停状态，或以其他方式取消它？如果可能的话，它不应该修改特定的元素（即我的例子中的链接），但是在全局级别上，以便保护页面的每个元素免受该错误的影响（我有许多受影响的元素，并且为每一个元素添加处理程序将是一个真正的痛苦所以我真的需要一个页面范围的解决方案）。 / p>

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

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

Android浏览器：取消CSS：在click（）处理程序中替换页面内容时的悬停状态

0 个答案: