Question

我使用带有angular-hammer库的Hammer.js 2.0.8的角度为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>上的滑动？

Answer 1

body或父对象始终位于其他内部元素之前，您不能触摸输入而不触摸身体，这是合乎逻辑的。

但是，如果您问我，我会在div的左边和右边分别放2个body，然后分别对它们分别设置attr swiperight和swipeleft，解决这个问题。

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

div 是绝对位置，当用户从身体右侧向右滑动时，它将同时作用于身体，也将向左滑动，并且当用户触摸身体内部时，您输入的元素将起作用。

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

1 个答案: