javascript - mousedown Events in RaphaelJS not working -

i have run problem raphaeljs doesn't react mousedown/mousemove/mouseup events works fine .click().

i created http://jsfiddle.net/jmu7z/2/ show mean.

js code:

var containerdivs = document.getelementsbyclassname('container'); var overlaydiv = null; for(var k=0;k<containerdivs[0].childnodes.length;k++) {     if (containerdivs[0].childnodes[k].classname.indexof("holder") !== -1)         overlaydiv = containerdivs[0].childnodes[k]; } var canvas  = raphael(overlaydiv,208,270); var bgr = canvas.rect(10,10, canvas.width-10, canvas.height-10).attr({fill: "0xff0000", stroke: "none", opacity:"0.2"});  bgr.mousedown( function(e) { alert ("down"); }); //doesn't work bgr.click( function(e) { alert ("click"); }); // works 

html:

<div class="container" style="position: relative; left: 0; top: 0;"><img class="corepic nonselectable" style="position:relative; top: 0; left: 0;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/56/tesla3.jpg/220px-tesla3.jpg" alt="2_3"><div class="holder nonselectable" style="position:absolute; top:0px; left:0px;" onselectstart="return false;"></div></div> 

any highly appreciated.

look @ demo provided based on example.

//bgr.click(function(){this.attr({stroke:'orange',"stroke-width":5,opacity:0.5}); bgr.mousedown(function()  {     this.attr({stroke:'red',"stroke-width":5,opacity:0.5});  }); bgr.mouseup(function()  {     this.attr({stroke:'blue',"stroke-width":5,opacity:0.5});  }); //bgr.mousemove(function(){this.attr({stroke:'green',"stroke-width":5,opacity:0.5}); 

take note there listeners cannot used simultaneously.

for example:

• click , mousedown events should not used on same object. why? because mosedown event triggers push mouse button down; whereas click different. if @ demo, comment , uncomment click. when press , hold mouse button nothing happens until release button. why when have both events on same object, mousedown triggers first , takes on click.
• mouseup , mousemove act similar previous point. mousemove triggers right away , takes on 'mouseup' event. why can see mousemove event on object has both events implemented.

---

plus, mousemove annoying. when have it, not let click, mousedown, or mouseup events happening. in 3 cases triggers , stays on whole time mouse on element.

hope helped little.