SVG pointer-events test by enjalot

Trying pointer-events: none; inside and outside of an <svg>. In the above visualization the bars labeled A have their pointer-events set to none, so they don’t emit any mouse events. All of the bars have event listeners that would change their background color if triggered by a mouseover.

Built with blockbuilder.org

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
    font-family: Helvetica, sans-serif}
    svg { width:100%; height: 50% }
    
    .inSVGA {
      cursor: pointer; /* decoration */
      pointer-events: none; /* let thru all cursor events */
    }
    .inSVGB {
      cursor: pointer;
    }
    
    .outSVGA {
      cursor: pointer; /* decoration */
      pointer-events: none; /* let thru all cursor events */
      width: 700px;
      height: 50px;
      margin-top: 20px;
      margin-left: 100px;
      line-height: 50px;
      padding-left: 10px;
      
    }
    .outSVGB {
      cursor: pointer;
      width: 700px;
      height: 50px;
      margin-top: 50px;
      margin-left: 100px;
      line-height: 50px;
      padding-left: 10px;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
    var startColor = "#eee";
    var x = 100;
    var y = 50;
    
    svg.append("rect").classed("inSVGA", true)
      .attr({x: x, y: y, width: 700, height: 50})
      .style({ 
        "fill": startColor,

       })
      .on("mouseover", function(d){
        d3.select(this).style("fill", "#111")
         d3.select("text.A").style("fill", "#eee")
      })
      .on("mouseout", function(d){
        d3.select(this).style("fill", startColor)
        d3.select("text.A").style("fill", "#111")
      })
    svg.append("text").classed("A", true)
    .text("A: <svg><rect></svg>")
    .attr({x: x + 10, y: y + 30})
    
    svg.append("rect").classed("inSVGB", true)
      .attr({x: x, y: y + 100, width: 700, height: 50})
      .style({ 
        "fill": startColor,
       })
      .on("mouseover", function(d){
        d3.select(this).style("fill", "#111")
        d3.select("text.B").style("fill", "#eee")
      })
      .on("mouseout", function(d){
        d3.select(this).style("fill", startColor)
        d3.select("text.B").style("fill", "#111")
      })
    svg.append("text").classed("B", true)
    .text("B: <svg><rect></svg>")
    .attr({x: x + 10, y: y + 130})
    
    d3.select("body").append("div").classed("outSVGA", true)
    .style({ 
      "background": startColor,
     })
    .on("mouseover", function(d){
      d3.select(this).style("background", "#111")
      .style("color", "#eee")
    })
    .on("mouseout", function(d){
      d3.select(this).style("background", startColor)
      .style("color", "#111")
    }).text("A: <div></div>")
    
    d3.select("body").append("div").classed("outSVGB", true)
    .style({ 
      "background": startColor,
     })
    .on("mouseover", function(d){
      d3.select(this).style("background", "#111")
      .style("color", "#eee")
    })
    .on("mouseout", function(d){
      d3.select(this).style("background", startColor)
      .style("color", "#111")
    }).text("B: <div></div>")

    console.log("you are now rocking with d3", d3);
  </script>
</body>