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? becausemosedown
event triggers push mouse button down; whereasclick
different. if @ demo, comment , uncommentclick
. when press , hold mouse button nothing happens until release button. why when have both events on same object,mousedown
triggers first , takes onclick
.mouseup
,mousemove
act similar previous point.mousemove
triggers right away , takes on 'mouseup' event. why can seemousemove
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.
Comments
Post a Comment