使用“ons-gesture-detector”时覆盖“ons-sliding-menu”滑动行为答案

【问题标题】：override "ons-sliding-menu" swipe behavior when using "ons-gesture-detector"使用“ons-gesture-detector”时覆盖“ons-sliding-menu”滑动行为
【发布时间】：2015-01-15 00:36:10
【问题描述】：

我正在快速演示使用“ons-gesture-detector”，我有一个“ons-sliding-menu”，可以从左侧滑动，所以如果我放一个“ons-list-”项目”包含在“on-gesture-detector”中

当我向左滑动时它工作正常，但是当我向右滑动时它会触发 ng-swiperight 但也会打开滑动菜单。

所以我想做的是在我执行“ng-swiperight”时覆盖打开的侧边菜单

这是一个代码示例：

<ons-sliding-menu menu-page="menu.html" main-page="balance.html" side="left"
              var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>

<ons-list ng-controller="testController">
    <ons-gesture-detector ng-swipeleft="sayAlert('left')" ng-swiperight="sayAlert('right')">
        <ons-list-item ng-click="showPopup('list.html')" modifier="tappable">
            <center>
                List
                <br />
                List
                List
                <br />
                List
            </center>
        </ons-list-item>
    </ons-gesture-detector>
    <ons-gesture-detector ng-swipeleft="sayAlert('left')" ng-swiperight="sayAlert('right')">
        <ons-list-item ng-click="showPopup('list.html')" modifier="tappable">
            <center>
                List
                <br />
                List
                List
                <br />
                List
            </center>
        </ons-list-item>
    </ons-gesture-detector>
</ons-list>

编辑： 我尝试将具有较小值的“swipe-target-width”添加到“ons-sliding-menu”，但这完全禁用了 swipeleft 和 swiperight 事件

【问题讨论】：

标签： angularjs onsen-ui

【解决方案1】：

您可以从<ons-gesture-detector> 元素停止事件传播。

在此示例中，我使用'mousemove' 事件，因为我在 PC 上进行了尝试，但是对于移动设备，您应该使用 'touchmove' 事件来代替（或同时使用两者）。

ons.ready(function() {
  var gestureDetector = document.querySelector('ons-gesture-detector');

  gestureDetector.addEventListener('mousemove', function(ev) {
    ev.stopPropagation();
  });
});

我在 Codepen 上做了一个例子： http://codepen.io/argelius/pen/GgWYBj

【讨论】：