Raphael JS：拖动结束时触发点击

Question

以下代码的意图是只有在单击圆形时更改其颜色，而不是在拖放后的鼠标抬起时。由于某种原因，Raphael会在鼠标抬起时触发click事件。如何防止这种情况发生？ 这是jsfiddle。 这是HTML：

<div id="canvas"></div>

以下是 JavaScript 代码：

Raphael.st.draggable = function() {
  var me = this,
  lx = 0,
  ly = 0,
  ox = 0,
  oy = 0,
  moveFnc = function(dx, dy) {
      lx = dx + ox;
      ly = dy + oy;
      me.transform('t' + lx + ',' + ly);
  },
  startFnc = function() {},
  endFnc = function() {
      ox = lx;
      oy = ly;
  };

  this.drag(moveFnc, startFnc, endFnc);
};



var paper = Raphael(document.getElementById('canvas'));
var mySet = paper.set();

var c = mySet.push(paper.circle(50, 50, 50).attr('fill', 'red'));

mySet.draggable();

c.click(function(evt) {
   this.attr({"fill": "#2e2e2e" });
});

- ps0604

---

为什么要使用set？您会添加更多的形状吗？如果您只使用一个形状，我有一个解决方案。 - Hakan SONMEZ

Answer 1

这是我用来拖动集合的代码：

http://jsfiddle.net/Margo/Q3EBw/5/

paper = Raphael(0, 0, 500, 500);
var ox = 0;
var oy = 0;
var screenSet = paper.set();
screenSet.push(paper.rect(0, 0, 100, 75, 0).attr({
        fill: 'red', stroke: 'none'
    }));

screenSet.push(paper.text(0 , 0 ,"Text").attr({ "text-anchor": "start" }));

    start = function() {

        ox =  this.attr("x");
        oy = this.attr("y");
        screenSet.attr({
            opacity: 1
        });
},

    move = function(dx, dy) {
        var att ={
            x: ox + dx,
            y:oy + dy
        };
        screenSet.attr(att);
    },
    up = function() {
        this.attr({
            opacity: .5
        });
        ox = 0, oy = 0;
    };
screenSet.drag(move, start, up);

希望能对你有所帮助 :)

- Margo

---

这并没有回答问题 - 在拖动结束时，元素仍然被点击。 - de.

既然它是一个被接受的答案，我猜它确实回答了这个问题...当你使用拖动功能来改变样式而不是使用点击事件时，不需要使用prevent event。 - Margo

标题清楚地表明了“Raphael JS：单击在拖动结束时触发”。单击仍然被触发，这个答案对我有帮助，但并没有解决关于单击的同样问题。 - llamerr