1

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>
0

1 respuesta 1

0

La razón de tu problema es que los eventos hacen burbuja por lo que cuando haces click en el cuadro rojo también haces click en el cuadro rosa; también al tener un evento puesto en los dos es posible que los dos se ejecuten.

Para saber sobre que elemento se esta ejecutando el evento puedes usar event.currentTarget

para evitar que se siga propagando usa

event.stopPropagation()

Consulta ¿Puedo cancelar el sumbit de un formulario y evitar que llegue al controlador(servidor)?

y también Diferencia entre currentTarget, delegateTarget y target en evento de JQuery

Aquí hay un ejemplo

window.onload = function() {
  var rect = document.getElementById("rectRojo");
  rect.addEventListener("click", quienHaSido);
}

function quienHaSido(event) {
  var evento = event || window.event;
  // Te dirá que tipo de elemento esta ejecutandolo
  console.log(evento.currentTarget.nodeName)
  console.info("Ha sido: " + evento.target.id);

  // Detendrá la propagación del evento
  evento.stopPropagation();
}
<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>

4
  • Devconcept, muchas gracias por tu rápida respuesta. Había visto el nodeName en algunos ejemplos, incluso lo había probado, pero algo puse mal porque no funcionó. Ahora ya va. Y ya puestos en el tema de estas propiedades que no encuentro la documentación al respecto en w3c, sólo el DOM Event Object: w3schools.com/jsref/dom_obj_event.asp ¿Dónde puedo encontrarlas?
    – user11254
    Commented el 31 ago. 2016 a las 19:03
  • @FrankMascarell Básicamente lo que te devuelve es una referencia al Elemento. En la documentación especifica que usualmente son este, document y window los targets habituales. Puedes consultar también esa misma documentación en inglés si los artículos en español están incompletos.
    – devconcept
    Commented el 31 ago. 2016 a las 19:18
  • @FrankMascarell Consulta aquí porque no debes usar w3schools como documentación. Usa MDN, HTML5Rocks y CSS tricks para tu aprendizaje.
    – devconcept
    Commented el 31 ago. 2016 a las 19:23
  • @FrankMascarell: w3c y w3school son cosas muuuy distintas. La primera es la organización que norma la web. La segunda una empresa que eligió un nombre parecido para confundir gente y lucrar más, y ni siquiera dan un buen servicio.
    – ESL
    Commented el 14 dic. 2016 a las 0:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.