单击 SVG Snap canvas 时触发事件

Question

我想跟踪我的 SVG Snap canvas 何时被点击。

 var s = Snap("#svgout"), //creates the canvas
        source = "data:image;base64," + $('#imageBtn').val(), //set map background for canvas
        img = s.image(source, 0, 0, "100%", "100%"), currRect, numNodes = 0;

        s.click(function(){
            console.log("clicked canvas");
        });

基本上，我的 SVG 是一个背景，我在其中拖放了一些元素（组）。我的问题是，单击不仅在单击 canvas 时发生，而且在我单击我的元素之一进行拖动或仅单击它们时也会发生。如何仅在单击 canvas 时触发此事件，而不是在单击 canvas 中的元素时触发此事件？

           var rect = s.rect(posx, posy, 40, 40, 6).attr({
                fill: "none",
                stroke: "#F44336",
                strokeWidth: 3,
                myId: guidGenerator(),
            });

            var group = s.group(rect).attr({
                cursor: "move",
            });


            if(numNodes > 0){
                currRect.removeAttribute('stroke');
            }


            currRect = group.node.childNodes[0];

            group.append(s.image("../images/pi.svg", posx, posy, 40, 40));

            group.drag(move,start, up);

Answer 1

我能想到的选项很少...

在 svg 上放置一个不透明度非常小的矩形，例如。 0.00001。将点击处理程序放在上面，而不是 canvas.

或者，如果您将点击处理程序放在 canvas 上，请检查点击的目标。如果它是 canvas，那么就做点什么，否则忽略它（或做其他事情）。

或者，可以设置一个 class 的 svgcanvas，以及 canvas 具有的 svgdraggables，或者可拖动元素。然后更改 class 如果需要，svgdraggables 是否具有 'pointer-events: none'，然后将其放回原处。

Answer 2

检查是否确实是 canvas 被点击的一种方法是检查目标 ID。

var paper = Snap("#svgout");

paper.click(function(e) {
  if(e.target.id == "svgout") {
    console.log("Canvas Clicked");
  }
});

另一种在单击子项时停止单击 canvas 的方法是对传递给子项的单击方法的事件执行 stopPropagation()。

此方法的问题是您必须将它添加到每个子元素。如果我是你，我会选择第一个例子。

var rect = paper.rect(0,0,40,40);

rect.click(function(e) {
  e.stopPropagation();
});

注意：两种方法均由我使用SnapSVG V0.4.1测试过

单击 SVG Snap canvas 时触发事件

Fire an event when SVG Snap canvas is clicked

javascript

onclick

raphael

snap.svg