Search code examples
javascriptdom-eventsraphaelevent-bubbling

Why is dragging in Raphaël broken by stopping propagation of mousemove in an enclosing element in the bubble phase?

I am trying to debug an event handling bug in a complicated web application, but I've reduced the problem to a simple example that demonstrates the behaviour that I'm confused by.

My example page, based one of the Raphaël examples, is as follows:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Raphaël · Drag-n-drop Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
        <script>
            window.onload = function () {
                $('body').mousemove(function(e) {
                    // console.log("in body's mousemove");
                    // Uncommenting the next line stops the move
                    // function below from being called:
                    // e.stopPropagation();
                });
                var R = Raphael(0, 0, "100%", "100%");
                var r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5});
                var start = function () {
                    this.ox = this.attr("cx");
                    this.oy = this.attr("cy");
                    this.animate({r: 70, opacity: .25}, 500, ">");
                },
                move = function (dx, dy) {
                    // console.log("in move function for the circle", this);
                    this.attr({cx: this.ox + dx, cy: this.oy + dy});
                },
                up = function () {
                    this.animate({r: 50, opacity: .5}, 500, ">");
                };
                r.drag(move, start, up);
            };
        </script>
    </head>
    <body>
        <div id="holder"></div>
    </body>
</html>

That version works as expected — you can drag the red circle around — but uncommenting the e.stopPropagation() line breaks dragging. If you have Firebug or Chrome and uncomment the console.log lines, you can see that the move function is never called - somehow the mousemove handler for the body element is being called before the event gets to the circle's handler.

I don't understand how this can be, since the mousemove hander on the body element is set in the bubble phase of event handling. If I understand the order in which events are processed correctly, the order in which mousemove handlers would be called here is approximately:

  1. capture phase: the body element's mousemove (null)
  2. capture phase: the svg element's mousemove (null)
  3. capture phase: the circle's mousemove (null)
  4. bubble phase: the circle's mousemove (set by Raphaël when dragging starts, and which calls the move function)
  5. bubble phase: the svg element's mousemove (null)
  6. bubble phase: the body element's mousemove (set as above, and which stops propagation)

If that's right, I don't understand how stopping propagation of the event in the mousemove handler of body in the bubble phase could break dragging, since it should happen after the circle has dealt with the event.

It would be great if someone could explain what's going on in this example, and in particular whether I've misunderstood how the event handling works, or there's something peculiar about how Raphaël implements dragging.

Solution

  • I tried asking about this on the Raphaël mailing list, and the replies there explain that the Raphaël mousemove handler is actually attached to document, which explains the behaviour I was seeing. One of the replies also explains why dragging needs to be implemented like that: