Переопределить события смахивания на перекрывающийся элемент - PullRequest
Новая
       13

Переопределить события смахивания на перекрывающийся элемент

0 голосов
/ 11 мая 2019

У меня угловая страница 1.5.7 с использованием hammer.js 2.0.8 с библиотекой angular-hammer .

Мой <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>?

1 Ответ

0 голосов
/ 11 мая 2019

body или родитель всегда предшествует другим внутренним элементам, вы не можете коснуться ввода, не касаясь тела, и это логично.

Но если вы спросите меня, я поставлю 2 div наслева и справа от моих 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 абсолютное положение, и когда пользователь проведет пальцем вправо от тела, он будет работать с телом, а также с левым, а когда пользователь коснется тела, ваш элемент ввода будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...