覆盖重叠元素上的滑动事件答案

【问题标题】：Override swipe events on overlapping element覆盖重叠元素上的滑动事件
【发布时间】：2019-05-11 00:20:54
【问题描述】：

我有一个使用hammer.js 2.0.8 和angular-hammer 库的角度1.5.7 页面。

我的<body> 是 100% 的高度，并且上面有滑动事件，允许用户来回翻页。但在正文中，我有一个<input> 标签列表，我有一个不同的滑动事件。

问题是在<body> 上的滑动总是被触发，即使我在<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>

如何让<input> 上的滑动优先于<body> 上的滑动？

【问题讨论】：

标签： angularjs hammer.js

【解决方案1】：

body 或 parent 总是在其他内部元素之前，你不能在不触摸 body 的情况下触摸输入，这是合乎逻辑的。

但是如果你问我，我会在我的body 的左侧和右侧分别设置 2 个div，然后分别设置 attr swiperight 和 swipeleft，以解决这个问题。

<body>
  <div class="left" hm-swipeleft="prevDay(page)"></div>
  <div class="right" hm-swiperight="prevDay(page)"></div>
  //----other elements
</body>

div 是绝对位置，当用户从 body 右侧向右滑动时，它将在 body 上起作用，向左滑动时，当用户在 body 内部触摸时，输入元素将起作用。

【讨论】：