0

我遇到了 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>

非常感谢任何帮助。

4

1 回答 1

0

看看我根据你的例子提供的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不同。如果您查看演示，请评论所有内容并取消评论click。当您按住鼠标按钮时，在您释放按钮之前不会发生任何事情。这就是为什么当你在同一个对象上有两个事件时，mousedown首先触发并接管click.
  • mouseup并且mousemove也与前一点类似。mousemove立即触发并接管 'mouseup' 事件。这就是为什么您只能mousemove在实现了这两个事件的对象上看到事件。

另外，mousemove真的很烦人。当你拥有它时，它甚至不会让你click、、mousedown或mouseup事件发生。在所有三种情况下，它都会触发并在鼠标悬停在元素上的整个过程中保持不变。

希望这有一点帮助。

于 2013-08-03T23:33:56.153 回答