Menu
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:
move function)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.
929
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:
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
