Tengo un elemento de texto delante de un elemento rect. El elemento rect responde a los eventos de la wheel para que pueda desplazarse. El elemento de texto responde a los eventos de drag para que se pueda mover.
Cuando el puntero del mouse está sobre el elemento de texto, bloquea el elemento rect para que no obtenga el evento de la wheel .
No puedo establecer pointer-events en none en el elemento de texto, ya que también debe responder al hacer clic y arrastrar.
Cuando se detecta el evento de la wheel en el elemento de texto, ¿hay alguna forma de pasarlo al elemento rect?
Investigué la función de despacho, pero no quiero crear un nuevo evento. Solo quiero pasar el evento.
Llamar al controlador de eventos del elemento rect cuando el elemento de texto recibe el evento de la wheel parece funcionar. Esto requiere llamar a métodos de objetos no relacionados, por lo que quiero evitarlo.
Aquí hay un código simplificado:
var container = d3.create("svg:g") var rectElem = container.append("rect") .on("wheel",handleScroll) var textElem = container.append("text") .call(d3.drag().on("drag",handleDrag)) .on("wheel",(e)=>{ // How to send event to rect element ? })Lo descubrí a partir del comentario de altocumulus que apunta a esta respuesta.
Hay dos maneras de hacer esto.
Opción 1
El manejo de eventos de la wheel se puede mover al elemento contenedor para que surja tanto del elemento rect como del elemento de texto que se encuentran dentro de él.
var container = d3.create("svg:g") .on("wheel",handleScroll) var rectElem = container.append("rect") var textElem = container.append("text") .call(d3.drag().on("drag",handleDrag))opcion 2
El evento recibido por el elemento de texto se puede clonar y enviar al elemento rect. (Tiene que ser clonado. El mismo evento no puede ser reutilizado).
var container = d3.create("svg:g") var rectElem = container.append("rect") .on("wheel",handleScroll) var textElem = container.append("text") .call(d3.drag().on("drag",handleDrag)) .on("wheel",(e)=>{rectElem.node().dispatchEvent(new WheelEvent(e.type,e))})