重叠 SVG 元素上的鼠标事件答案

【问题标题】：mouse events on overlapping SVG elements重叠 SVG 元素上的鼠标事件
【发布时间】：2013-09-20 07:01:03
【问题描述】：

如何处理重叠 svg 元素的点击事件？我正在使用 Reaphael.js 库。

问题是顶部<svg> DOM 元素正在拦截鼠标事件，即使底部元素没有被任何绘图重叠。我的问题是如何使我的示例中的两个圆圈都可点击，并且仍然将它们保留在两个 svg 元素中？

这是我的代码：

CSS：

#container {
  position: relative;
  width: 200px;
  height: 200px
}

#container>svg {
  position: absolute !important;
  top: 0;
  left: 0;
}

JavaScript：

var topLayer = Raphael('container', 200, 200);

var bottomLayer = Raphael('container', 200, 200);

topLayer.circle(100, 100, 50)
  .attr({
    fill: 'red',
    stroke: false
  })
  .mousedown(function(){alert('Top layer')});

bottomLayer.circle(120, 120, 50)
  .attr({
    fill: 'pink',
    stroke: false
  })
  .mousedown(function(){alert('Bottom layer')});

工作JSFiddle 示例

PS： 我知道我可以在单个<svg> DOM 元素中实现分层，但事实并非如此。我的底部 SVG 元素具有缩放和平移功能，而顶部 SVG 元素应该是静态的。

【问题讨论】：

我认为这不可能。
一层在另一层之上，我不认为你可以点击下面的层
一种解决方法是在容器 div 上应用 mousedown 事件，然后计算事件的坐标是否在 svg 元素的范围内。然后使用 javascript 进行更改。

标签： javascript svg raphael dom-events

【解决方案1】：

您可以通过将其设置为 none 来操作名为 pointer-events 的 css 属性。这将导致允许所有事件流过标记有 pointer-events:none 的层。

你可以看到this小提琴：https://jsfiddle.net/krul/6SmQ9/2/

#container {
    pointer-events:none;
    position: relative;
    width: 200px;
    height: 200px
}
#container>svg {
    pointer-events:none;
    position: absolute !important;
    top: 0;
    left: 0;
}
svg circle {
    pointer-events:visible;    
}

【讨论】：