Stacked Element阻止事件传播

Question

我正在使用svg元素创建图表.我正在向他们应用事件处理程序.事件按预期工作,但我有一个问题,因为有时其中一个元素直接在另一个元素之上,所以当底部元素的事件应该被触发时,它不会.如果你看下面的图片,我有rect一个zoom事件.变焦event会在mouse-wheel发生时触发rect,但当圆圈覆盖它时,不会触发事件.我必须拥有它circles,rect以便在需要时可以点击它们.我怎么可能解决这个问题.我尝试在这里搜索解决方案SO,但找不到任何特定于此问题的内容.

我有一个显示圈子的JSFiddle.如果您在圆圈之外的任何位置进行缩放,则会触发缩放行为,但如果您尝试在圆圈顶部进行缩放,则缩放行为将不起作用.

Answer 1

你可以加

circle.selected {
    pointer-events:none;
}

看看是否有帮助。

更新：我刚刚注意到，pointer-events根据OP的评论，禁用不是一个选项。在这种情况下，检查所选圆圈上的事件是否是鼠标滚轮缩放事件，如果是，则disable-zoom向所选圆圈添加 css 类可能会与具有.disable-zoom该指令的类的css 一起使用pointer-events:none;。