ios javascript touchstart event not firing

Question

I have a div that's absolute positioned with it's parent relative positioned like so:

<div class="panoramic-go-right"></div>

.panoramic-go-right {
  background-color: blue;
  height: 100px;
  width: 100px;
  margin-top: -50px;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1000;
}

I'm adding code to it's touchstart event along with it's parent like this:

$('.panoramic-go-right').parent()[0].addEventListener("touchstart", function (e) {
    alert('c');
    e.stopPropagation();
    e.preventDefault();
    return false;
});
$('.panoramic-go-right')[0].addEventListener("touchstart", function (e) {
    alert('d');
    e.stopPropagation();
    e.preventDefault();
    return false;
});

The problem is when I touch the element on a iPhone 4 running iOS 7.1.2 (both Chrome and Safari), 'c' is displayed.

On a physical Android phone (Chrome), an emulated iPhone 4s running iOS 9.2 (Safari) and a physical iPhone 6+ (Safari), the code works as it should and displays 'd'.

Can someone please help me out on why an iPhone 4 (iOS 7.1.2) is sending the touch to the parent instead of the child. Thanks!