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
| <!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> |
