Touchable area of HTML buttons is too large in Android browser -
we having problem html buttons in android browser stealing touch events surrounding area. seems browser, or native ui, gives html buttons larger click area size of button displayed on screen , button steals touch events should captured nearby areas. problem occurs on android emulator various hardware platforms. here's example web page:
below, div1 top darker rectangle (with text) , div2 bottom lighter rectangle (with button).
- we click in div1 (red dot indicator)
- the touch event delivered div1
- the mouse events delivered button , div2
- we have expected events delivered div1
here example using same page.
- we clicked in div2 @ red dot
- the touch event delivered div2
- the mouse events delivered div1
- we expected events delivered div2
we have examined source code android , android browser(including webkit) looking explanation behavior, haven't found it. we've been searching web else reporting problem , have not found mention of it!
we looking type of hint might here... perhaps meta tag fuzzy-focus? or css style reduce click-stealing behavior?
any ideas appreciated, characteristic makes our web app frustrating use.
here code 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 touch events, synthesized mouse events, , 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>
well use z-index:2 div , z-index:1 other 1 important? think no.
and postion:absolute not trying relative?
well should marked done when gave up
Comments
Post a Comment