I have a text element in front of a rect element.
The rect element responds to wheel events so that it can be scrolled.
The text element responds to drag events so that it can be moved.
When the mouse pointer is over the text element, it blocks the rect element from getting the wheel event.
I cannot set pointer-events to none on the text element since it also needs to respond to click and drag.
When the wheel event is detected on the text element, is there a way to pass it on to the rect element?
I looked into the dispatch function, but I don't want to create a new event. I just want to pass along the event.
Calling the rect element's event handler when the text element gets the wheel event seems to work. This requires calling methods of unrelated objects, so I want to avoid it.
Here is some simplified code:
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 ?
})
Figured it out from altocumulus' comment which points to this answer.
There are two ways to do this.
Option 1
The wheel event handling can be moved to the container element so that it bubbles up from both the rect element and the text element that are inside it.
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))
Option 2
The event received by the text element can be cloned and dispatched to the rect element. (It has to be cloned. The same event can't be reused).
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))})