У нас проблема с кнопками HTML в браузере Android, которые крадут сенсорные события из окружающей области.Похоже, что браузер или собственный пользовательский интерфейс предоставляет HTML-кнопкам большую область щелчка, чем размер кнопки, отображаемой на экране, и эта кнопка крадет события касания, которые должны регистрироваться соседними областями.Проблема возникает на эмуляторе Android, а также на различных аппаратных платформах.Вот пример веб-страницы:
Ниже div1 - верхний темный прямоугольник (с текстом), а div2 - нижний светлый прямоугольник (с кнопкой).
- Мы нажимаем вdiv1 (индикатор красной точки)
- Событие касания доставляется на div1
- События мыши доставляются на кнопку и div2
- Мы ожидали, что все события будут доставленыв div1
Вот еще один пример использования этой же страницы.
- Мы нажали в div2 на красную точку
- Событие касания было доставлено в div2
- События мыши были доставлены в div1
- Мы ожидали, что все события будут доставлены в div2
Мы изучили исходный код Android и браузера Android (включая веб-набор), пытаясь найти объяснение этому поведению, но не нашли его.Мы также искали в Интернете кого-то еще, сообщающего об этой проблеме, и не нашли никакого упоминания о ней!
Мы ищем некоторые подсказки, которые могли бы помочь нам здесь ... Возможно, метатег для нечеткой фокусировки?Или стиль 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>