mousedown RaphaelJS中的事件不起作用

我遇到了RaphaelJS對mousedown/mousemove/mouseup事件沒有反應的問題，但使用.click（）可以正常工作。mousedown RaphaelJS中的事件不起作用

我創造這個http://jsfiddle.net/JMu7Z/2/顯示我的意思。

JS代碼：

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>

任何幫助高度讚賞。

來源

2013-07-25 user2291017

你應該接受答案，我認爲這是一個解決方案。 – Gago

看看DEMO我根據你提供的例子。

//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});

請注意，有些偵聽器不能同時使用。

例如：

click和mousedown事件不應在同一對象上一起使用。爲什麼？因爲只要按下鼠標按鈕，就會觸發mosedown事件;而click則不同。如果你看看DEMO，請評論一切，並取消註釋click。 當您按下並按住鼠標按鈕時，直到釋放按鈕纔會發生任何事情。這就是爲什麼當你在同一個對象上同時有兩個事件時，mousedown先觸發並接管click。
mouseup和mousemove也與前面的點類似。 mousemove立即觸發並接管'mouseup'事件。這就是爲什麼你只能在實現了兩個事件的對象上看到mousemove事件。

另外，mousemove實在是煩人。當你有它，它甚至不會讓你click，mousedown，或mouseup事件發生。在所有這三種情況下，它都會觸發並始終保持鼠標位於元素上方。

希望對此有所幫助。

來源

2013-08-03 23:33:56 Brian

mousedown RaphaelJS中的事件不起作用

回答

相關問題