mousedown RaphaelJS中的事件不起作用

Question

我遇到了一个问题，即RaphaelJS不会对mousedown / mousemove / mouseup事件做出反应，但可以与.click（）配合使用。

我创建了这个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>

非常感谢您的帮助。

Answer 1

查看我根据您提供的示例提供的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事件发生。 在这三种情况下，它都会触发并一直停留在鼠标悬停元素上的整个时间。

希望这能有所帮助。