javascript - 是否可以触发位于其他元素后面的元素事件

Question

有没有办法可以触发另一个元素后面的元素的事件。

var svg = d3.select("svg"),
  margin = {
    top: 20,
    right: 20,
    bottom: 110,
    left: 40
  },

  width = +svg.attr("width") - margin.left - margin.right,
  height = +svg.attr("height") - margin.top - margin.bottom;

var focus = svg.append("g")
  .attr("class", "focus")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

focus.append("circle")
  .attr("cx", "80")
  .attr("cy", "80")
  .attr("r", "80")
  .style("fill", "red")
  .style("cursor", "pointer")
  .on("click", function() {
    alert("circle - clicked")
  });

focus.append("rect")
  .attr("x", "60")
  .attr("y", "60")
  .attr("width", "40")
  .attr("height", "40")
  .style("fill", "blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="960" height="500"></svg>

Answer 1

在 html 元素上设置 pointer-events: none; 样式将使点击事件“穿过”元素到达其后面的元素，同时保持其可见。