svg元素能触发svg元素的点击事件吗？开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

文章/答案/技术大牛

发布

<!DOCTYPE html>
<style>
  circle { fill: lightgreen; stroke: #000; }
</style>
<script src="https://d3js.org/d3.v5.min.js"></script>

var svg = d3.select("body").append("svg")
    .style("float", "left")
    .attr("width", 480)
    .attr("height", 480)
    .attr('pointer-events', 'all')
    .on("click", log("SVG"));
svg.append("circle")
    .attr('pointer-events', 'all')
    .attr("cx", 240)
    .attr("cy", 240)
    .attr("r", 200)
    .on("click", log("OUTER"));
svg.append("circle")
    .attr('pointer-event', 'all')
    .attr("cx", 240)
    .attr("cy", 240)
    .attr("r", 100)
    .on("click", log("INNER"));
var div = d3.select("body").append("div")
    .style("float", "left");
function log(message) {
  return function() {
    div.append("p")
        .text(message)
        .style("background", "#ff0")
      .transition()
        .duration(2500)
        .style("opacity", 1e-6)
        .remove();
}

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;

问 svg元素能触发svg元素的点击事件吗？ EN

回答 2

Stack Overflow用户