Touch events improperly propagated

On android and iOS when you touch the top button, the bottom button receives a click event (not a touch event). This only happens if the top button moves when you touch it (translate or positional)

by vishl

HTML

<div id="top">Top button</div>
<div id="bottom" onclick="alert('bottom')">Bottom button</div>

CSS

#top{
    position:absolute;
    top:100px;
    left:100px;
    width:100px;
    height:100px;
    background:red;
    border:solid 2px black;
    z-index:1;
}
#top.active{
    background:green;
    left:0px;
}

#bottom{
    display:block;
    position:fixed;
    width:100%;
    height:400px;
    background:#333;
    color:white;
}
</style>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<style>

JavaScript

$(function(){
    $('#top').on('touchend', function(){$(this).toggleClass('active');});
});