handling touch event with nested elements?

handling touch event with nested elements?

Im having this problem with jquery and the layout of my html.
for example say you have a div element with id "#test" and a child element
img with class "nested"
<div id="test">
<img class="nested" src="example.jpg">
</div>
with Jquery I have two touch events,
$(document).on("click", "#test", function(){
console.log("clicked on test id");
});
$(document).on("click", ".nested", function(){
console.log("clicked on nested element");
});
my problem is on the second touch event, when the user clciked on nested
item, this will also trigger the first element, because obviously its
nested, and i don't want that to happen.
im pretty sure this is a simple problem, but i don't seem to get it.