# 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