Removing the screen from the image map screen in the Android 4.x application via PhoneGap Build

Question

I tried every way to try to remove the heighlight by clicking on the image area of ​​the image map. I searched google again and again and added all the CSS code that I could find in the hope that this would help .. but that doesn't seem to be the case.

An example of what I'm talking about:

I added:

-webkit-user-modify: read-write-plaintext-only; border:none; outline: 0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: none !important; -webkit-user-modify: read-write-plaintext-only; -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; outline:none; border: none; } img{ -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-user-modify: read-write-plaintext-only; outline:none; border: none; border-style: none; } body, textarea:focus, input:focus, area:focus{ outline:none; border: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-user-modify: read-write-plaintext-only; } a{ outline:none !important; border: none !important; } a img { border:none; outline:none; } area{ outline:none; border: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-user-modify: read-write-plaintext-only; } #map { outline:none; border: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; -webkit-user-modify: read-write-plaintext-only; } <img height="1024" src="img/MM.png" usemap="#MM_map" width="768" hidefocus="true"> <area coords="35,116,349,225" href="#HULU" id="HULU_id" onclick="$('#HULU').click();" shape="rect" style="border: none;" onfocus="blur();"> 

Answer 1

The only way to prevent this is to capture the ontouchend event and prevent the default browser behavior by returning false to the handler.

with jQuery:

 $("map area").on("touchend", function() { return false; }); 

Answer 2

The easy way. Proven. Used it again, even now, in the Android cordora app.

 img[usemap], map area { outline: none; } 

to use