我正在使用放大器故事来显示故事。 github pull request表示他们已经实现了向左/向右滑动以查看下一个/上一个故事的功能。我可以看到此here的工作演示，但是当我尝试在页面上向左或向右滑动时，它仅显示“点击导航”提示。
我需要捕获所有这些轻扫事件并在其上调用我自己的函数，但不知道该怎么做（我是javascript的初学者）。我已经看到了amp-stories捕获滑动手势并决定是否要显示导航提示的代码：
amp-story.js
installGestureRecognizers_() {
// If the story is within a viewer that enabled the swipe capability,this
// disables the navigation education overlay to enable:
// - horizontal swipe events to the next story
// - vertical swipe events to close the viewer,or open a page attachment
if (this.viewer_.hasCapability('swipe')) {
return;
}
// Shows "tap to navigate" hint when swiping.
gestures.onGesture(SwipeXYRecognizer,(gesture) => {
const {deltaX,deltaY} = gesture.data;
const embedComponent = /** @type {InteractiveComponentDef} */ (this.storeService_.get(
StateProperty.INTERactIVE_COMPONENT_STATE
));
// TODO(enriqe): Move to a separate file if this keeps growing.
if (
this.storeService_.get(StateProperty.BOOKEND_STATE) ||
embedComponent.state !== EmbeddedComponentState.HIDDEN ||
this.storeService_.get(StateProperty.accESS_STATE) ||
this.storeService_.get(StateProperty.SIDEBAR_STATE) ||
!this.storeService_.get(StateProperty.SYSTEM_UI_IS_VISIBLE_STATE) ||
!this.storeService_.get(StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT)
) {
// Cancels the event for this gesture entirely,ensuring the hint won't
// show even if the user keeps swiping without releasing the touch.
if (gesture.event && gesture.event.cancelable !== false) {
gesture.event.preventDefault(); // code breaks at this line
}
return;
}
if (
(gesture.event && gesture.event.defaultPrevented) ||
!this.isSwipelargeEnoughForHint_(deltaX,deltaY)
) {
return;
}
this.ampStoryHint_.showNavigationOverlay();
});
}
}
当我尝试滑动时，它在gesture.event.preventDefault()处中断并给出错误：
amp-story.js:876 Unable to preventDefault inside passive event listener invocation
我要做的就是：
<head>
//styles and scripts for amp-story here
<script>
// capture swipe events and call my function
</script>
</head>
<body>
<amp-story standalone title="my-story-page">
<amp-story-page>
<div class="my-story-text"> This is the first page of the story. </div>
</amp-story-page>
...
</amp-story>
</body>