svg 元素可以触发 svg 元素的点击事件吗？

首先，此解决方案使用您在 HTML 中引用的 D3 v5，而不是 D3 v2（已有 9 年历史）。回到你的问题，你说：我希望能够触发它们的事件并传播到它们下面的元素，直到SVG本身被触发。好吧，这不是传播的意思。冒泡意味着在DOM树中上升，但这些圆圈不是父/子，它们只是兄弟姐妹。因此，你想要的与传播无关，所以我们需要一种不同的方法。我在这里建议的方法使用，获取您单击的坐标下的所有元素，并结合用于调度单击（我在这里找到了该函数，并对其进行了修改以用于 D3）。最后，我需要标志，因为指针事件设置为的元素被忽略（顺便说一句，它是，不是）。elementFromPointd3.dispatchgetAllElementsclickednoneelementFromPointpointer-eventspointer-event这是演示：let clicked;var svg = d3.select("body").append("svg")  .style("float", "left")  .attr("width", 480)  .attr("height", 480)  .attr('pointer-event', 'all');svg.append("circle")  .attr('pointer-event', 'all')  .attr("cx", 240)  .attr("cy", 240)  .attr("r", 200)  .on("click", function() {    if (!clicked) return;    log("OUTER")  });svg.append("circle")  .attr('pointer-event', 'all')  .attr("cx", 240)  .attr("cy", 240)  .attr("r", 100)  .on("click", function() {    if (!clicked) return;    log("INNER")  });var div = d3.select("body").append("div")  .style("float", "left");function log(message) {  div.append("p")    .text(message)    .style("background", "#ff0")    .transition()    .duration(2500)    .style("opacity", 1e-6)    .remove();}d3.select("svg").on("click", function() {  clicked = true;  getAllElements(...d3.mouse(this));  log("SVG")  clicked = false;  function getAllElements(x, y) {    const elements = [];    let thisElement = document.elementFromPoint(x, y);    while (thisElement && thisElement.nearestViewportElement) {      elements.push(thisElement);      d3.select(thisElement).style("display", "none");      thisElement = document.elementFromPoint(x, y);    }    elements.forEach(function(elm) {      d3.select(elm).style("display", null)        .dispatch("click");    });  };})<!DOCTYPE html><style>  circle {    fill: lightgreen;    stroke: #000;  }</style><body>  <script src="https://d3js.org/d3.v5.min.js"></script>

svg 元素可以触发 svg 元素的点击事件吗？

2回答