Tengo un componente React Swiper con una colección de componentes secundarios Video.JS para reproducir videos en dispositivos móviles, y un evento touchend adjunto a los elementos secundarios VideoJS para reproducir y pausar el video. Pero cuando se activa el evento final de deslizamiento, también reproducirá el video mientras se activa el touchend . ¿Cómo detengo la propagación del evento? Intenté que esto no funciona.

 <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>

Y mi componente VideoJS

 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} /> </> ); };