Как остановить распространение события tap на дочерний компонент с помощью ответного молотка js?

Question

У меня есть компонент React, который позволяет отображать pdf в программе просмотра с использованием pdf. js. Для реализации масштабирования жестов я использовал библиотеку реактивный молот js. Я попытался stopImmediatePropagation() метод на дочернем компоненте, но безуспешно. Я также попробовал с библиотекой propagating-hammerjs, она тоже не работала. У кого-нибудь есть идеи, как это реализовать, и если невозможно посоветовать мне библиотеку, отличную от молотка, которая позаботится о том, чтобы остановить распространение событий?

render() {
    const {
      isFileLoading, isPageLoading, currentPage, numPages,
    } = this.state;
    return (
      <Hammer
        onTap={this.handletap}
      >
        <div className="crowdaa-pdfviewer">
          <div className="crowdaa-pdfviewer__canvas-container">
            <canvas
              id="canvas"
              ref={this.canvasRef}
              style={isFileLoading ? { visibility: 'hidden' } : {}}
              className="crowdaa-pdfviewer__canvas"
              onChange={this.handleChange}
            />
          </div>
          { (isPageLoading || isFileLoading) && <Loading className="crowdaa-pdfviewer__loading" />}
          { !isFileLoading && (
          <Hammer onTap={e => e.srcEvent.stopImmediatePropagation()} >
            <div className="crowdaa-pdfviewer__controls">
              <button id="button-left" onClick={this.prev} disabled={currentPage <= 1}><FontAwesomeIcon icon={faChevronLeft} /></button>
              <button id="zoomInButton" onClick={this.zoomIn}><FontAwesomeIcon icon={faPlus} /></button>
              <span>page {currentPage}/{numPages || '--'}</span>
              <button id="zoomOutButton" onClick={this.zoomOut}><FontAwesomeIcon icon={faMinus} /></button>
              <button id="button-right" onClick={this.next} disabled={currentPage >= numPages}><FontAwesomeIcon icon={faChevronRight} /></button>
            </div>
          </Hammer>
          )}
        </div>
      </Hammer>
    );
  }