touchevent not firing when finger overlaps element

touchevent not firing when finger overlaps element

From the photo below, there is a red button that is basically an anchor
tag that looks like this: <a href="#" class="btn"></a> I'm using jQuery
with the following to bind the touch event to the red button:
var touch = ('ontouchstart' in window) || window.DocumentTouch && document
instanceof DocumentTouch;
var touchEvent = touch ? 'touchstart' : 'click';
jQuery('.btn').bind(touchEvent,function(e){
e.preventDefault();
e.stopPropagation();
//do something
});
The problem is that if the blue area is touched as you touch the red
button, the red button flashes as it takes focus, but the touch event
seems to not fire. You have to make sure that you touch only the red
button for the thing to work properly. There are no anchors or events tied
to the blue area which is simply a div with background color.
On other phones and newer androids, this problem does not occur. Is there
something that I can do for this version to be able to touch both the red
and blue areas and make sure the touch event fires for the red area?
Developing web on a mobile phone with the following specs running firefox
23: Android 2.3.4 HTC Sense Versi/on 3.0 Software Number: 1.50.531.1
Browser Version: WebKit/533.1