单击 SVG Snap 画布时触发事件

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 是一个背景，在其中我有一些我正在拖放的元素（组）。我的问题是，单击不仅在单击画布时发生，而且在我单击我的元素之一以拖动它或只是在一般情况下单击它们时发生。如何仅在单击画布而不是单击画布中的元素时触发此事件？

           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

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

var paper = Snap("#svgout");

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

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

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

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

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

注意：我使用 SnapSVG V0.4.1 测试了这两种方法

Answer 2

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

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

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

或者，也许设置一个svgcanvas类，以及画布具有的svgdraggables，或可拖动元素。然后根据需要更改该类，svgdraggables 是否具有“指针事件：无”，然后再将其重新打开。