Nous avons un problème avec les boutons HTML dans le navigateur Android voler des événements tactiles de la zone environnante. Il semble que le navigateur, ou l'interface utilisateur native, donne aux boutons HTML une plus grande surface de clic que la taille du bouton affiché sur l'écran et que le bouton vole des événements tactiles qui devraient être capturés par les zones proches. Le problème se produit sur l'émulateur Android ainsi que les différentes plates-formes matérielles. Voici un exemple de page Web:Touchable zone de boutons HTML est trop grande dans le navigateur Android
Ci-dessous, div1 est le rectangle le plus sombre du haut (avec le texte) et div2 est le rectangle le plus clair (avec le bouton).
- cliquer dans div1 (indicateur de point rouge)
- L'événement touche est livré à Div1
- Les événements de souris sont livrés au bouton et div2
- Nous nous attendions à tous les événements à livrer à div1
Voici un autre exemple en utilisant la même page.
- Nous avons cliqué sur div2 au point rouge
- L'événement touche a été livré à DIV2
- Les événements de souris ont été livrés à Div1
- Nous nous attendions à tous les événements à livrer à DIV2
Nous avons examiné le code source pour Android et le navigateur Android (y compris g webkit) recherche une explication pour ce comportement, mais ne l'ai pas trouvé. Nous avons également cherché sur le Web pour quelqu'un d'autre signaler ce problème et nous n'avons trouvé aucune mention de celui-ci!
Nous recherchons un certain type d'indice qui pourrait nous aider ici ... Peut-être un meta tag pour le flou-focus? Ou un style CSS qui permettrait de réduire ce comportement de vol de clic?
Toutes les idées seraient très appréciées, cette caractéristique rend notre application web très frustrante à utiliser.
Voici le code de la page:
<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>
Obtenir mêmes problèmes dans notre application. Très frustrant. Avez-vous découvert le problème? –
Pas encore.Je suis en train de lire le code Webcore pour savoir où il "corrige" les événements tactiles pour les mapper au widget natif le plus proche. Notez que sur Android, les boutons sont une forme de TextView, et TextViews sont ce qui attirent les touches d'où ils appartiennent. – Vagrant
Je viens de rencontrer le même problème avec notre site Web ici. Y a-t-il une solution à ce problème, par ex. une sorte de meta tag? –