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
}
}
div
anidados, ¿no? ¿Has probado a poner el evento en el elemento interno?