I have a React Swiper component with a collection of Video.JS children component to play videos on mobile devices, and a touchend event attached to the VideoJS children to play and pause the video. But when on swipe end event it will also play the video while the touchend is triggered. How do I stop event propagate down, I tried this doesn't work.

       <Swiper
          direction='vertical'
          spaceBetween={50}
          slidesPerView={1}
          onTouchMove={(s, e) => {
            e.preventDefault;
            e.stopPropagation;
          }}
        >
          {
            shorts.map((short: {id: number, display_image: String, file: string}) => {
              return (
                <SwiperSlide key={short.id}>
                  <Short short={short} />
                </SwiperSlide>
              )
            })
          }
        </Swiper>

And my VideoJS componenet

const Short = ({ short }) => {
  const playerRef = React.useRef(null);

  const videoJsOptions = {
    controls: true,
    bigPlayButton: false,
    responsive: true,
    sources: [{
      src: short.file,
      type: 'video/mp4'
    }],
    inactivityTimeout: 0,
  };

  const handlePlayerReady = (player) => {
    playerRef.current = player;

    // You can handle player events here, for example:
    player.on('ready', () => {
      player.playsinline(true);

      player.on('touchend', function(e) {
          if (window.isSwiping) {
            if (player.paused()) {
              player.play();
            } else {
              player.pause();
            }
          }
      });
    });
  };

  return (
    <>
      <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
    </>
  );
};