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

実際にクリックされたキャンバスかどうかを確認する1つの方法は、ターゲット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(); 
}); 

注：どちらの方法は、あなたがキャンバスの外SVG要素を入れて傾けるSnapSVGのV0.4.1

Answer 2

いくつかのオプション...

は、例えば、非常に小さな不透明、とSVGの上に矩形を入れてください。 0.00001。キャンバスではなく、クリックハンドラをクリックします。

また、クリックハンドラをキャンバスに配置した場合は、クリックのターゲットを確認してください。そのキャンバスの場合は、何かをする、そうでなければそれを無視する（または何かをする）。

または、キャンバスに含まれるsvgcanvasクラスとsvgdraggablesクラス、またはドラッグ可能な要素を設定できます。次に、必要に応じてそのクラスを変更し、svgdraggablesに 'ポインタイベント：なし'があるかどうかを確認してから、それを元に戻します。