Question

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

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

点击div1（红点指示符）
触摸事件已发送至div1
鼠标事件传递给按钮和div2
我们原本希望将所有活动发送到div1

alt text

以下是使用同一页面的另一个例子。

我们点了红点的div2
触摸事件已发送至div2
鼠标事件已发送至div1
我们希望所有活动都能传递给div2

alt text

我们已经检查了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>

Answer 1

你使用z-index：2为div和z-index：1为另一个是重要的吗？我想不。

和postion：绝对不是那么好尝试亲戚？

然后，当你放弃

时，应将其标记为已完成

Answer 2

使用此：

#div2, #button1 {overflow:hidden}

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

2 个答案: