防止在父元素上触发 Angular Material md-swipe-left/md-swipe-right 指令的函数

Question

我有一个填充 100% 页面高度的父元素和其中的几个子元素。在父项上向右滑动可切换侧边菜单，但我想阻止此功能并在我向右滑动它的子项时触发 childAction()。

<div id="parent" md-swipe-right="toggleSideMenu()">
    <div id="child" md-swipe-right="childAction()">
        ....
    </div>
</div>

Answer 1

像所有其他事件指令一样，md-swipe-right 提供 $event 作为本地。¹

在您的 HTML 中包含 $event 作为函数的参数。

<div id="parent" md-swipe-right="toggleSideMenu()">
    <div id="child" md-swipe-right="childAction($event)">
        ....
    </div>
</div>

在您的控制器中调用 stopPropagation() 函数。

$scope.childAction = function (event) {
     event.stopPropagation();
});

Prevent triggering Angular Material md-swipe-left/md-swipe-right directive's function on parent element