Override swipe events on overlapping element

I have an angular 1.5.7 page using hammer.js 2.0.8 with angular-hammer library.

My <body> is 100% height and has swipe events on it that allow a user to page back and forth. But within the body, I have a list of <input> tags which I have a different swipe event on.

The problem is the swipe on the <body> is always triggered, even when I swipe over the <input>.

<body ng-app="myApp" ng-controller="myCtrl" ng-cloak hm-swiperight="prevDay(page)" hm-swipeleft="nextDay(page)">

    <h1>{{data[page].today | dateSuffix}}</h1>

    <div ng-repeat="item in data[page].items track by $index" 
        hm-swiperight="strikeOn(page, {{$index}})" 
        hm-swipeleft="strikeOff(page, {{$index}})"
        hm-press="splashOn(page, {{$index}})">
        <input 
            value="{{item.name}}"
            placeholder="Item #{{$index+1}}"
            ng-class="{strike: item.done==true}"
            ng-trim="true"
            ng-model="item.name"
            ng-change="save()"
        />
    </div>

</body>

How do get the swipe on the <input> to take precedence over the swipe on the <body>?

Source: AngularJS