Question

如果在具有多个元素的svg-image中拖动元素后对元素使用toFront（） - 方法，则元素的click事件不会在第一次触发时触发。如果单击它或再次拖动相同的元素，则会触发所有后续单击事件。如果您更改为另一个元素，则第一次单击不会触发。（同样适用于双击，因为它依赖于点击）

我创建了一个简单的JSFiddle脚本来重现问题： http://jsfiddle.net/061h4hv7/1/

您需要打开浏览器控制台才能查看脚本的输出。

如果您第一次拖动红色方块，则不会触发点击事件。所有后续拖动都会触发点击（以及点击它）。

如果控制台仅记录

，您可以查看点击是否无效

mouseDown  mouseUp

但不是

mouseDown  mouseUp  click

我使用的是Ubuntu-chrome版本36.0.1985.125 Ubuntu 14.04（283153）。在Windows上的Chrome中也会出现此问题。但显然不是在FireFox中。我还没有测试IE（也许有人可以测试它吗？）

这是我用来重现问题的代码。请注意，如果您注释掉该行 this.toFront（）; 一切正常。不幸的是，在我的真实代码中，toFront（） - 调用是必不可少的。

同样重要的是要注意，拖拽方法不是该问题的唯一触发器，因为我已经实现了一个不同的拖拽方法，我没有使用转换，但问题仍然存在。 / p>

var click = function(){
    console.log('click');
};

var dragger = function () {
    console.log('mouseDown');
    this.previousDx = 0;
    this.previousDy = 0;
};

var move = function (dx, dy) {
    console.log('mouseMove');
    var txGroup = dx - this.previousDx;
    var tyGroup = dy - this.previousDy;

    this.translate(txGroup, tyGroup);

    this.previousDx = dx;
    this.previousDy = dy;
};

var up = function () {
    console.log('mouseUp');

    this.toFront();
};

var paper = Raphael(0, 0, "100%", "100%");

var red = paper.rect(10,10,30,30).attr({ 'fill' : 'red' }).drag(move, dragger, up).click(click);
var black = paper.rect(50,10,30,30).attr({ 'fill' : 'black' }).drag(move, dragger, up).click(click);
var blue = paper.rect(90,10,30,30).attr({ 'fill' : 'blue' }).drag(move, dragger, up).click(click);

你们知道解决问题的方法吗？否则，我必须通过记录mouseDown和mouseUp调用来手动实现单击和双击。

RaphaelJS + Chrome：在toFront（）调用后第一次触发单击事件

0 个答案: