为什么此网站无法注册点击事件？

Question

I have a map made with d3 that has title that I want to display as hover over tool tip. It correctly handles mouse click events for panning and zooming. However, it does not handle mouse overs for tools tips.

My HTML looks like this:

<div id="mapwrapper">
    <div id="map">
        <svg width...>

If I set a jquery handler for any mouse event (click/mouseover) it will fire for map wrapper or map, but not for anything in the SVG.

$("#mapwrapper").on("mouseover", function() { //same for click events...
    alert("mapwrapper"); //fires
});
$("#map").on("mouseover", function() {
    alert("map");  //fires
}); 
$("svg").on("mouseover", function() {
    alert("map");   //does not fire
});

I've tried several methods of displaying tooltips and they don't work. I've also tried to setup a simple jquery mouseover alert (just displaying a popup when you run your mouse over an SVG element with a certain class) and that doesn't work. So clearly something is messing up the mouseover events on the SVG on the site. I know d3 has "events" -- although I don't know much about how they work.

Interestingly, if I copy and paste the HTML into a new document and then load that document the SVG with register click events

I have set the pointer events property on the SVG to visible and get the same behavior

How do I debug this problem?

Answer 1

The problem was that I had an SVG rectangle that was blocking the path elements beneath it. When I hide the SVG rectangle overlaying its children, then the children (which were blocked) register click events.