阻止事件传播的堆叠元素

Question

我正在使用svg元素创建一个图形。我正在对它们应用事件处理程序。事件按预期工作，但我有一个问题，因为有时一个元素直接在另一个元素之上，所以当底部元素的事件应该被触发时，它却没有被触发。如果你看下图，我有一个带有zoom事件的rect。当mouse-wheel在rect上发生时，缩放event会触发，但当圆覆盖它时，不会触发该事件。我必须将circles放在rect的顶部，以便在需要时可以单击它们。我怎么可能绕过这个问题呢。我尝试在SO上搜索解决方案，但找不到任何针对此问题的具体解决方案。

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

​

​

Answer 1

我不确定这在d3js上下文中是否对您有帮助，但是...

使用普通的JS，您只需捕获循环中的轮子事件并简单地调用rect事件处理程序即可。

演示：(尝试在形状上单击和鼠标滚移)。

​

$("rect").on('wheel', rectWheel);
$("circle").on('wheel', circleWheel);
$("circle").on('click', circleClick);

function rectWheel(evt) {
  out("rect zoom");
}

function circleWheel(evt) {
  rectWheel(evt);
}

function circleClick(evt) {
  out("circle click");
}

function out(text) {
  var $out = $("#out");
  $out.text($out.text() + text + '\n');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
  <rect id="back" width="150" height="150" fill="red"/>
  <circle id="front" cx="100" cy="100" r="20" fill="green"/>
</svg>

<pre id="out">
</pre>

​

Answer 2

您可以添加

circle.selected {
    pointer-events:none;
}

看看有没有帮助。

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