Stacked Element阻止事件传播

Question

我正在使用svg元素创建图表。我正在向他们应用事件处理程序。事件按预期工作，但我有一个问题，因为有时其中一个元素直接在另一个元素之上，所以当底部元素的事件应该被触发时，它不是。如果您查看下面的图片，我的rect会有zoom个事件。当event发生mouse-wheel时会触发缩放rect，但当圈子覆盖它时，不会触发事件。我必须在circles之上设置rect，以便在需要时点击它们。我怎么可能解决这个问题。我尝试在SO上搜索解决方案，但无法找到与此问题相关的任何内容。

我有JSFiddle来显示圈子。如果您在圆圈之外的任何位置进行缩放，则会触发缩放行为，但如果您尝试在圆圈顶部进行缩放，则缩放行为将无法正常工作。

Answer 1

我不确定这是否会对d3js上下文有所帮助，但是......

使用普通的JS，您只需捕捉圈子中的滚轮事件，然后只需调用rect事件处理程序。

演示:(尝试在形状上单击并鼠标滚动）。

＆＃13;

＆＃13;

$("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');
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以添加

circle.selected {
    pointer-events:none;
}

看看它是否有帮助。

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