5

Tengo un Progress Bar en un vídeo manejado con Youtube-player.

  <div class="p-video__controls--showed" @click="getClickPosition">
    <div ref="track" class="p-video__controls--showed-track"></div>
  </div>

La capa superior p-video__controls-showed track muestra el progreso del vídeo mientras la capa inferior p-video__controls--showed muestra una capa background o contenedora.

Quiero que coja los valores de la capa inferior cuando se pinche sobre ella, independientemente de que la capa superior este encima o no.

O sea, quiero eliminar los eventos de la capa superior y que el evento onClick me lo coja de la capa inferior para jugar con sus valores, y así mostrar el vídeo y la capa superior en el momento del vídeo donde se da click.

En Jquery hay una función delegate() pero no he sabido utilizarla con JS, aunque no se si es la solución. También he probado con esta documentación, pero nada. (https://www.quirksmode.org/js/events_order.html)

Este es la función que utilizo cuando se utiliza el evento onclick.

getClickPosition (e) {
   if (e.target !== this.$refs.track) {
    let width = e.target.scrollWidth
    let p = e.layerX
    let xPosition = (p * 100) / width
    var newTime = this.durationO * (xPosition / 100)
    this.seekInVideo(newTime)
  } else {
    //CÓGEME LOS VALORES DE LA CAPA P-VIDEO__CONTROLS--SHOWED
  }
}
5
  • no logro entenderte de todo podias ser mas claro en lo que realmente deseas hacer????
    – Bryro
    Commented el 2 ene. 2020 a las 13:45
  • Pues no se. Utilizaré otras palabras más específicas. Quiero coger el objeto JS del Evento onClick de la capa con clase "p-video__controls--showed", pero cuando la capa "p-video__controls--showed-track" se superpone, no puedo obtenerlo, ya que coge el evento de esta capa. Commented el 2 ene. 2020 a las 14:43
  • Superior, inferior... en este caso creo que sería más lógico hablar de externa/interna, ya que son elementos div anidados, ¿no? ¿Has probado a poner el evento en el elemento interno? Commented el 2 ene. 2020 a las 16:29
  • Digo superior e inferior porque precisamente, la capa se situa por encima, y es lo que hace que el evento me coja el evento superior/interno/p-video__controls-showe--track, que es lo que quiero evitar. Quiero que el evento me coja el div inferior/externo/ p-video__controls--showed Commented el 3 ene. 2020 a las 7:35
  • Ya que si te fijas en el código, necesito coger "e.target.scrollWidth", "e.target" del div externo/contenedor/inferior/p-video__controls--showed Commented el 3 ene. 2020 a las 8:05

1 respuesta 1

1

Por lo que pasas es un problema comun en desarrollo web y es uso del Event Bubbling. Lo que pasa aca es que el click en elemento inferior va a subir el evento al padre, justo lo que te pasa a ti, lo que puedes hacer es prevenir la propagacion de evento hacia los padres. Seria algo asi:

function handleClick(event){
  event.stopPropagation(); 
 //...rest of your code
}

Si quieres conocer mas de esto mira aca https://javascript.info/bubbling-and-capturing. Espero sea de ayuda para alguien.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.