En este sencillo proyecto de ejemplo, he incluido dos eventos click
; uno para el div
donde está el gráfico SVG, y otro para el rectángulo rojo. El problema es que cuando hago clic en el rectángulo rojo, genera los dos eventos, el del div
y el del rectángulo rojo. Lo que quiero hacer es anular el evento del div sólamente cuando hago clic en el rectángulo rojo.
Otro problema añadido es que en mi proyecto real hay demasiados paths para poder compararlos uno a uno, es decir, en mi proyecto el rectángulo rojo, es un grupo con muchos paths donde se puede hacer clic en cualquiera de ellos dentro del rectángulo rojo.También necesito utilizar la misma función para ambos eventos.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pruebas eventos SVG</title>
</head>
<body>
<div id="drawSVG" onClick="quienHaSido()">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 744.09448819 1052.3622047"
height="297mm"
width="210mm">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
id="rectRosa"
d="m -5.7142859,-1.9235096 745.7142959,0 0,1054.2858096 -745.7142959,0 z"
style="opacity:1;fill:#f2d4d7;fill-opacity:1;fill-rule:nonzero;stroke:#efdddd;stroke-width:5.921;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
id="rectRojo"
d="m 231.42857,392.36221 314.28571,0 0,265.7143 -314.28571,0 z"
style="opacity:1;fill:#682c00;fill-opacity:1;fill-rule:nonzero;stroke:#efdddd;stroke-width:5.921;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
</svg>
</div>
<script>
window.onload = function(){
var rect = document.getElementById("rectRojo");
rect.addEventListener("click", quienHaSido);
}
function quienHaSido(event){
var evento = event || window.event;
console.info("Ha sido: " + evento.target.id);
}
</script>
</body>
</html>