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会先触发并接管{{1 }}。
click和mouseup的行为也类似于前一点。 mousemove立即触发并接管'mouseup'事件。这就是为什么你只能在实现了两个事件的对象上看到mousemove事件的原因。

另外， mousemove 真的很烦人。如果您拥有它，它甚至不会让您发生mousemove，click或mousedown事件。在所有三种情况下，它会触发并保持鼠标在元素上的整个时间。

希望这有点帮助。

mousedown RaphaelJS的活动无效

1 个答案: