CODEWITHSUNDEEP
javascripteventsd3.jsevent-bubbling
ppoliani
ppoliani

Reputation: 4906

d3js mousemove event is not bubbling

I have an svg structure similar to the following:

<svg>
   <g id="main-group">
     ...
      <rect id="event-rect"></rect>
   </g>
</svg>

and i have attached the same events to the #event-rect and #main-group

 d3.select('#event-rect').on('mousemove', clb);
 d3.select('#main-group').on('mousemove', clb2);

The problem here is that the first clb is triggered whereas the event listener of the parent node (i.e. #main-group) is not.

Why doesn't the event bubbling phase working here?

The actual code that use is:

 d3.select('#event-rect').on('mousedown', mousedown);
 d3.select('#event-rect').on('mousemove', mousemove);
 d3.select('#event-rect').on('mouseup', mouseup);

Then in another module i attach the same set of the events:

 d3.select('#main-group').on('mousedown', dragStart);
 d3.select('#main-group').on('mousemove', mousemove);
 d3.select('#main-group').on('mouseup', dragEnd);

All the callbacks are invoked except for the dragStart. I doesn't make any sense to me whatsoever

Upvotes: 2

Views: 3264

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

If the dimensions of the elements are identical, the g element will be obscured by the rect. Depending on what you want to do, there are a couple of options.

  • You could increase the size of the g element such that the event is triggered when the mouse just leaves the rect.
  • You could remove the listener for the g element altogether and execute its actions in the handler for the rect.
  • Similarly, you could remove the listener from the rect element and handle everything in the listener for the g element.

Upvotes: 2

Related Questions