Jquery/RaphaelJS SVG rectをクリックして無効にします

Question

私はいくつかの矩形を描くためにRaphaelJSを使用します。私は各rectが選択可能であることを望む。だから私はクリック機能を追加、それは他の色で選択した矩形を埋めるし、配列に追加します。選択したすべての矩形の選択を解除したいこのために、私は紙のクリック機能を追加しました。 問題はありません。なぜなら、私がrectをクリックするたびに、rectのclick on関数を呼び出してから、その関数を呼び出します。それで、直ちに再びrectを選択します。私は、問題は、rectのクリックがrectを通過することだと思います。

誰もがクリックを防ぐ方法を知っていますか？

ありがとうございます！

// bild new rectangle 
var rectElement = paper.rect(x, y, w, h); 
// add attributes 
rectElement.attr({ 
     fill: "white", 
     opacity: 1, 
     stroke: "#F00", 
     title: text 
}); 



$(document).on("click", ".drawedRect", function() { 
    console.log("Add to selected"); 
    selectedRects.push(this); 
    $(this).attr({ 
     fill: "#F39814", 
    }); 
}); 

$(document).on("click", "#paper", function() { 
    console.log("Click paper"); 
    selectedRects.forEach(function(entry){ 
     $(entry).attr({ 
      fill: "white", 
     }); 
    }) 
}); 

Answer 1

私はラファエルのJSライブラリは、独自のクリックイベントを持っていたことが判明：私はRECTとクリックの方法での作成方法をここで

です。しかし、彼らはrectとeclipseのようなsvg要素にしか利用できませんでした。ライブラリにはキャンバス自体のクリックイベントハンドラは含まれていません。したがって、ノード名を確認するために、jqueryのクリックイベント関数を変更する必要がありました。

$(document).on("click", ".drawedRect", function() { 
    if (e.target.nodeName == "rect"){ 
     console.log("Add to selected"); 
     selectedRects.push(this); 
     $(this).attr({ 
      fill: "#F39814", 
     }); 
    } 
}); 

$(document).on("click", "#paper", function() { 
    if (e.target.nodeName == "svg"){ 
     console.log("Click paper"); 
     selectedRects.forEach(function(entry){ 
      $(entry).attr({ 
       fill: "white", 
      }); 
     }) 
    } 
});