我在 rect 元素前面有一个文本元素。rect 元素响应wheel事件以便它可以滚动。文本元素响应drag事件以便它可以被移动。
当鼠标指针悬停在文本元素上时，它会阻止 rect 元素获取wheel事件。
我无法在文本元素上设置pointer-events为none，因为它也需要响应单击和拖动。
当在wheeltext 元素上检测到事件时，有没有办法将其传递给 rect 元素？
我查看了 dispatch 函数，但我不想创建新事件。我只想传递事件。
当文本元素获取wheel事件时调用 rect 元素的事件处理程序似乎有效。这需要调用无关对象的方法，所以我想避免它。
下面是一些简化的代码：
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 ?
})
从指向这个答案的altocumulus 的评论中找出来。
有两种方法可以做到这一点。
选项1
的wheel，使得其从所述rect元素和属于它里面的文本元素都冒泡事件处理可以移动到该容器元素。
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))
选项 2
文本元素接收到的事件可以被克隆并分派到 rect 元素。（它必须被克隆。不能重复使用相同的事件）。
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))})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句