Android 浏览器中 HTML 按钮的可触摸区域太大答案

【问题标题】：Touchable area of HTML buttons is too large in Android browserAndroid 浏览器中 HTML 按钮的可触摸区域太大
【发布时间】：2010-12-01 06:39:45
【问题描述】：

Android 浏览器中的 HTML 按钮从周围区域窃取触摸事件时遇到问题。似乎浏览器或本机 UI 为 HTML 按钮提供了比屏幕上显示的按钮大小更大的点击区域，并且按钮窃取了应该由附近区域捕获的触摸事件。该问题出现在 Android 模拟器以及各种硬件平台上。这是一个示例网页：

下面，div1 是顶部较暗的矩形（带有文本），div2 是底部较亮的矩形矩形（带有按钮）。

我们点击div1（红点指示器）
触摸事件被传递到 div1
鼠标事件传递给按钮和div2
我们本来希望所有事件都传递到 div1

这是使用同一页面的另一个示例。

我们点击了div2中的红点
触摸事件已传递到 div2
鼠标事件已传送到 div1
我们希望将所有事件传递到 div2

我们已经检查了 Android 和 Android 浏览器（包括 webkit）的源代码，正在寻找对此行为的解释，但尚未找到。我们也一直在网上搜索任何人否则报告这个问题，并没有发现任何提及它！

我们正在寻找某种可能对我们有所帮助的提示... 也许是模糊焦点的元标记？还是一种可以减少这种点击窃取行为的 CSS 样式？

任何想法都将不胜感激，这个特性使我们的网络应用程序使用起来非常令人沮丧。

这是页面的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width" >

<title>Android click target test</title>
<script type="text/javascript" charset="utf-8">
  var div1;
  var div2;
  var button1;

  // OnLoad, install event listeners for touch events, synthesized mouse events, and click events
  function doLoad(e) {
      div1 = document.getElementById('div1');
      div2 = document.getElementById('div2');
      button1 = document.getElementById('button1');
      messages = document.getElementById('messages');

      div1.addEventListener("touchstart", touch_emsg, false);
      div1.addEventListener("touchend", touch_emsg, false);
      div1.addEventListener("mousedown", emsg, false);
      div1.addEventListener("mouseup", emsg, false);
      div1.addEventListener("mouseover", emsg, false);
      div1.addEventListener("mouseout", emsg, false);
      div1.addEventListener("click", emsg, false);

      div2.addEventListener("touchstart", touch_emsg, false);
      div2.addEventListener("touchend", touch_emsg, false);
      div2.addEventListener("mousedown", emsg, false);
      div2.addEventListener("mouseup", emsg, false);
      div2.addEventListener("mouseover", emsg, false);
      div2.addEventListener("mouseout", emsg, false);
      div2.addEventListener("click", emsg, false);

      button1.addEventListener("touchstart", touch_emsg, false);
      button1.addEventListener("touchend", touch_emsg, false);
      button1.addEventListener("mousedown", emsg, false);
      button1.addEventListener("mouseup", emsg, false);
      button1.addEventListener("mouseover", emsg, false);
      button1.addEventListener("mouseout", emsg, false);
      button1.addEventListener("click", emsg, false);
  }

  // Messages ring-buffer
  var messages;
  var lines = 0;

  function emsg(e) {
    text = "";
    text += e.type + "(" + ((e.clientX==undefined)?"?":e.clientX) + "," + ((e.clientY==undefined)?"?":e.clientY) + ")";
    if (e.target.id != undefined) {text += " " + e.target.id;}
    if (e.currentTarget != undefined && e.currentTarget.id != undefined) {text += "::" + e.currentTarget.id;}
    msg(text);
  }

  function touch_emsg(e) {
    if (e.targetTouches != undefined) {
        var touch = e.targetTouches[0];
    }
    text = "";
    text += e.type;
    if (touch != undefined) {text += "(" + ((touch.clientX==undefined)?"?":touch.clientX) + "," + ((touch.clientY==undefined)?"?":touch.clientY) + ")";}
    if (e.target.id != undefined) {text += " " + e.target.id;}
    if (e.currentTarget != undefined && e.currentTarget.id != undefined) {text += "::" + e.currentTarget.id;}
    msg(text);
  }

  function msg(text) {
    lines++;
    if (lines > 15) {clearmsg();}
    messages.innerHTML += "<br/>" +  " " + text;
  }

  function clearmsg() {
    lines = 0;
    messages.innerHTML = "";
  }

</script>

</head>


<body onload="doLoad()">

<div id="div1" style="position: absolute; left: 0px; top: 0px; width: 200px; height: 30px; background-color:#c0c0c0; z-index:1;">
    div1 text
</div>

<div id="div2" style="position: absolute; left: 0px; top: 30px; width: 200px; height: 40px; background-color:#f0f0f0; z-index:2;">
    <button id="button1"> button 1 </button>
</div>

<button id="clearbutton" style="float:right;" onclick="clearmsg();">Clear</button>
<div id="messages" style="position:relative; top:65px; background-color:#aaaaff"></div>

</body>

【问题讨论】：

在我们的应用程序中遇到相同的问题。非常令人沮丧。发现问题了吗？
还没有。我正在阅读 Webcore 代码以找出它在哪里“修复”触摸事件以将它们映射到最近的本机小部件。请注意，在 Android 上，Buttons 是 TextView 的一种形式，而 TextViews 是吸引触摸离开它们所属位置的原因。
我刚刚在我们的网站上遇到了同样的问题。有没有解决这个问题的方法，例如某种元标记？
在放弃之前，我爬遍了 WebView 和 Webkit 的源代码。下一步是重建带有调试代码的 Webkit 树，但我们转向了不同的解决方案。（我们编写了一个原生应用程序；无论如何，Web 界面只是一个临时解决方案。）我开始认为这与基于屏幕密度的 slop 计算有关，然后我放弃了。
状态更新。我在谷歌找到了一份工作。现在尝试与 Android 团队中的一些人交朋友。越来越近了……

标签： android html button touch dom-events

【解决方案1】：

你使用 z-index:2 作为 div 和 z-index:1 作为另一个，这很重要吗？我认为没有。

和位置：绝对不是那么好试试亲戚？

那么当你放弃时应该将其标记为完成

【讨论】：

对不起。 “标记为完成”？我们已经尝试了所有组合。这与 html 级别的东西没有任何关系。

【解决方案2】：

使用这个：

#div2, #button1 {overflow:hidden}

【讨论】：