Question

我想跟踪点击SVG Snap画布的时间。

 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是一个背景，在其中我有一些我拖放的元素（组）。我的问题是点击不仅在单击画布时发生，而且当我单击其中一个元素来拖动它或只是在gerneral中单击它们时。如何仅在单击画布时才触发此事件，而不是在我的画布中的元素被cliked时触发？

           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。将click处理程序放在那个而不是画布上。

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

或者，可以设置一个svgcanvas类，以及画布所具有的svgdraggables，或者可拖动的元素。然后在需要时更改该类，svgdraggables有'pointer-events：none'，然后将其重新放回。

Answer 2

检查实际是否被点击的画布的一种方法是检查目标ID。

var paper = Snap("#svgout");

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

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

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

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

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

注意：我使用SnapSVG V0.4.1

测试了这两种方法

单击SVG Snap画布时触发事件

2 个答案: