堆叠元素防止事件传播

Question

我正在使用svg 元素创建一个图表。我正在对它们应用事件处理程序。事件按预期工作，但我有一个问题，因为有时其中一个元素直接位于另一个元素之上，所以当底部元素的事件应该被触发时，它不是。如果你看下面的图片，我有一个 rect 和一个 zoom 事件。缩放event 在mouse-wheel 发生在rect 上时触发，但当圆圈覆盖它时，不会触发事件。我必须将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;
}

看看有没有帮助。

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